"use client";

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

interface FaqDisplayProps {
  faqs: {
    question: string;
    answer: string;
  }[];
}

export function FaqDisplay({ faqs }: FaqDisplayProps) {
  return (
    <div>
      <h3 className="font-semibold text-card-foreground mb-2">
        FAQ Structured Data
      </h3>
      <Accordion type="single" collapsible className="w-full">
        {faqs.map((faq, index) => (
          <AccordionItem value={`item-${index}`} key={index}>
            <AccordionTrigger>{faq.question}</AccordionTrigger>
            <AccordionContent>{faq.answer}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}