"use client";

import { useState } from "react";
import { useTranslation } from "@/hooks/useTranslation";

export function ContactFAQ() {
  const { t } = useTranslation("contact.faq");
  const [open, setOpen] = useState<number | null>(0);

  const items = [
    { q: t("q1"), a: t("a1") },
    { q: t("q2"), a: t("a2") },
    { q: t("q3"), a: t("a3") },
    { q: t("q4"), a: t("a4") },
    { q: t("q5"), a: t("a5") },
    { q: t("q6"), a: t("a6") },
  ];

  return (
    <section className="faq-section wrap">
      <div className="faq-hd">{t("heading")}</div>
      <div className="faq-list">
        {items.map((item, i) => (
          <div
            key={i}
            className={`faq-item${open === i ? " open" : ""}`}
            onClick={() => setOpen(open === i ? null : i)}
          >
            <div className="faq-q">
              {item.q}
              <span className="faq-plus">+</span>
            </div>
            {open === i && <div className="faq-a">{item.a}</div>}
          </div>
        ))}
      </div>
    </section>
  );
}