"use client";

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

interface FaqSectionProps {
  locale: string;
}

export function FaqSection({ locale }: FaqSectionProps) {
  const { t } = useTranslation("subscribe");
  const [openIndex, setOpenIndex] = useState<number>(0);

  const faqs = [
    { q: t("faq_q1"), a: t("faq_a1") },
    { q: t("faq_q2"), a: t("faq_a2") },
    { q: t("faq_q3"), a: t("faq_a3") },
    { q: t("faq_q4"), a: t("faq_a4") },
    { q: t("faq_q5"), a: t("faq_a5") },
    { q: t("faq_q6"), a: t("faq_a6") },
  ];

  return (
    <section className="sub-faq">
      <div className="wrap">
        <h2>{t("faq_heading")}</h2>
        <div className="faq-list">
          {faqs.map((faq, i) => (
            <div
              key={i}
              className={`faq-item${openIndex === i ? " open" : ""}`}
              onClick={() => setOpenIndex(openIndex === i ? -1 : i)}
            >
              <div className="q">
                {faq.q}
                <span className="plus">+</span>
              </div>
              {openIndex === i && <div className="a">{faq.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}