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

export type FaqProps = {
  heading?: string;
  description?: string;
  items?: Array<{ question: string; answer: string }>;
};

export default function Faq({ heading = '', description = '', items = [] }: FaqProps) {
  return (
    <section id="faq" className="scroll-mt-20 bg-background py-20 sm:py-28">
      <div className="section-shell">
        <div className="max-w-4xl">
          <h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
          {description && <p className="mt-4 max-w-2xl leading-7 text-muted-foreground">{description}</p>}
        </div>
        <Accordion type="single" collapsible className="mt-12 border-t">
          {items.map((item, index) => (
            <AccordionItem key={index} value={`faq-${index}`}>
              <AccordionTrigger className="py-7 text-2xl font-normal sm:py-8 sm:text-3xl">{item.question}</AccordionTrigger>
              <AccordionContent className="max-w-3xl pb-8 text-base leading-7 text-muted-foreground">{item.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}