"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { useProduct } from "@/app/(users)/product/[slug]/product-page-client";

export default function ProductFAQ() {
  const product = useProduct();

  if (!product.faqs || product.faqs.length === 0) {
    return null;
  }

  return (
    <section className="pb-20">
      <div className="mx-auto max-w-4xl">
        <div className="mb-12 text-center">
          <h2 className="text-3xl font-bold tracking-tight">
            Frequently Asked Questions
          </h2>

          <p className="mt-3 text-muted-foreground">
            Everything you need to know before purchasing this product.
          </p>
        </div>

        <Accordion>
          {product.faqs.map((faq, i) => (
            <AccordionItem
              key={i}
              value={`faq-${i}`}
              className="overflow-hidden"
            >
              <AccordionTrigger className="py-4 text-left flex items-center text-base font-semibold hover:no-underline">
                <span className="font-black text-primary text-base border-b-2 border-primary leading-none pb-0.5 tracking-wider">
                  {i + 1 > 9 ? i + 1 : `0${i + 1}`}
                </span>
                <span>{faq.question}</span>
              </AccordionTrigger>

              <AccordionContent className="text-base leading-7 text-muted-foreground">
                {faq.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}