"use client";

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

export function BlogFaqs({ faqs }: { faqs: BlogFaq[] }) {
  if (!faqs.length) return null;

  return (
    <section className="mt-12">
      <h2 className="mb-5 text-2xl font-bold text-[#003D6B]">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-base font-semibold text-[#003D6B] hover:no-underline">
              {faq.question}
            </AccordionTrigger>
            <AccordionContent className="text-[15px] leading-relaxed text-slate-600">
              <div
                className="[&_a]:font-medium [&_a]:text-[#007BFF] [&_a:hover]:underline"
                dangerouslySetInnerHTML={{ __html: faq.answerHtml }}
              />
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </section>
  );
}