---
import { markdownToHtml } from '@/lib/markdown';
import { QuestionList } from '@/components/web/subcomponents/QuestionList.tsx';

interface Props {
    faq: FrequentlyAskedQuestionsComponent;
}

const faq = Astro.props.faq;
---

<div
    id={`faq-${faq.id}`}
    class="flex lg:flex-row flex-col justify-between py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
>
    <div class="flex flex-col gap-2.5 lg:w-[50%] w-full">
        <h2 class="text-5xl font-bold">{faq.title}</h2>
        { faq.text !== null && (
            <div set:html={markdownToHtml(faq.text)}></div>
        ) }
    </div>
    <div class="lg:w-[50%] w-full">
        <QuestionList client:load questions={faq.questions} />
    </div>
</div>