import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';

export type FAQProps = {
  subTitle: string;
  title: string;
  description: string;
  items: {
    value: string;
    trigger: string;
    content: string;
  }[];
};

export default function FAQSection({
  subTitle,
  title,
  description,
  items,
}: FAQProps) {
  return (
    <section className="relative z-60 bg-[#F8F8F8] py-12 font-inter md:py-28">
      <div className="container grid grid-cols-1 gap-8 px-4 md:grid-cols-2 md:items-center md:gap-20 md:px-28">
        <div className="px-0 md:px-8">
          <h3 className="mb-2 font-semibold">{subTitle}</h3>
          <h3 className="mb-6 font-syne text-3xl font-bold md:text-5xl">
            {title}
          </h3>
          <p>{description}</p>
        </div>

        <Accordion
          type="single"
          collapsible
          defaultValue={items?.[0]?.value}
          className="space-y-4"
        >
          {items?.map((item) => (
            <AccordionItem
              key={item.value}
              value={item.value}
              className="rounded-2xl border border-black/15 bg-white/50 px-6"
            >
              <AccordionTrigger className="text-lg font-bold">
                {item.trigger}
              </AccordionTrigger>
              <AccordionContent>{item.content}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}