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

import type { LandingFaqContent } from './content';

interface FaqProps {
  content: LandingFaqContent;
}

export const FAQ = ({ content }: FaqProps) => (
  <section id='faq' className='border-border/40 bg-muted/20 border-y'>
    <div className='container mx-auto px-4 py-24'>
      <div className='mx-auto max-w-4xl'>
        <div className='mb-12 text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl'>
            {content.heading}
          </h2>
          <p className='text-muted-foreground mx-auto max-w-2xl text-lg'>
            {content.description}
          </p>
        </div>

        <Accordion type='single' collapsible className='space-y-4'>
          {content.items.map((item) => (
            <AccordionItem
              key={item.question}
              value={item.question}
              className='bg-background border-border/60 rounded-2xl border px-5'
            >
              <AccordionTrigger className='text-left text-base font-semibold hover:no-underline'>
                {item.question}
              </AccordionTrigger>
              <AccordionContent className='text-muted-foreground pb-5 text-base leading-7'>
                {item.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </div>
  </section>
);
