import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { JsonLd } from "@/components/json-ld";
import type { FAQ } from "@/content/solutions";
import { cn } from "@/lib/utils";

/**
 * FAQAccordion (§6.3, §9.3): renders the accordion AND emits FAQPage JSON-LD
 * from the SAME data source, so the two can never drift.
 */
export function FAQAccordion({
  faqs,
  className,
  emitSchema = true,
}: {
  faqs: FAQ[];
  className?: string;
  emitSchema?: boolean;
}) {
  if (faqs.length === 0) return null;

  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqs.map((f) => ({
      "@type": "Question",
      name: f.q,
      acceptedAnswer: { "@type": "Answer", text: f.a },
    })),
  };

  return (
    <div className={cn("mx-auto w-full max-w-4xl", className)}>
      <Accordion type="single" collapsible className="w-full divide-y divide-border/80 rounded-2xl border border-border/80 bg-card p-4 shadow-sm md:p-6">
        {faqs.map((f, i) => (
          <AccordionItem key={i} value={`faq-${i}`} className="border-none py-2 first:pt-0 last:pb-0">
            <AccordionTrigger className="text-left font-display text-base font-medium text-foreground hover:no-underline hover:text-primary transition-colors md:text-lg">
              {f.q}
            </AccordionTrigger>
            <AccordionContent className="text-pretty text-sm text-muted-foreground leading-relaxed md:text-base pt-2">
              {f.a}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
      {emitSchema ? <JsonLd data={schema} /> : null}
    </div>
  );
}