"use client";

import { useTranslations } from "next-intl";

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

const QUESTIONS = ["q1", "q2", "q3", "q4", "q5"] as const;

export function FaqSection() {
  const t = useTranslations("Pricing");

  return (
    <section className="flex flex-col gap-4">
      <h2 className="text-2xl font-semibold tracking-tight">{t("faqTitle")}</h2>
      <Accordion type="single" collapsible className="w-full rounded-lg border px-4">
        {QUESTIONS.map((q) => (
          <AccordionItem key={q} value={q} className="last:border-b-0">
            <AccordionTrigger className="text-left text-base font-medium">
              {t(`faq.${q}`)}
            </AccordionTrigger>
            <AccordionContent className="text-sm text-muted-foreground">
              {t(`faq.${q.replace("q", "a")}`)}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </section>
  );
}