"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import type { ContentFaq } from "@/lib/content-faqs";

export default function ProductFaqs({ faqs }: { faqs: ContentFaq[] }) {
  if (!faqs.length) return null;

  return (
    <div>
      <h2 className="mb-3 text-lg font-semibold text-slate-900">Frequently asked questions</h2>
      <Accordion type="single" collapsible className="w-full">
        {faqs.map((faq, i) => (
          <AccordionItem key={i} value={`faq-${i}`} className="border-b border-slate-200">
            <AccordionTrigger className="text-left text-sm font-semibold text-slate-900 hover:no-underline">
              {faq.question}
            </AccordionTrigger>
            <AccordionContent className="text-sm leading-relaxed text-slate-600">
              <div
                className="[&_a]:font-medium [&_a]:text-primary [&_a:hover]:underline"
                dangerouslySetInnerHTML={{ __html: faq.answerHtml }}
              />
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}