"use client";
import { useState } from "react";
import { useLanguage } from "@/contexts/LanguageContext";
import faq_data from "@/data/faq-data";

export default function FaqArea() {
  const { t } = useLanguage();
  const [openIndex, setOpenIndex] = useState<number>(0);

  const toggleAccordion = (index: number) => {
    if (openIndex === index) {
      setOpenIndex(-1);
    } else {
      setOpenIndex(index);
    }
  };

  return (
    <div className="azzle-section-padding">
      <div className="container">
        <div className="azzle-section-title center max-width-950" data-aos="fade-up" data-aos-delay="500">
          <h2>{t("faq.title")}</h2>
        </div>
        <div className="azzle-faq-wrap1 faq-page" data-aos="fade-up" data-aos-delay="700">
          {faq_data.map((item, i) => (
            <div key={i} className={`azzle-faq-item ${openIndex === i ? 'open' : ''}`}>
              <div className="azzle-faq-header" onClick={() => toggleAccordion(i)}>
                <h3>{t(item.questionKey)}</h3>
                <div className="azzle-active-icon">
                  <img src="assets/images/home1/+.svg" alt="plas" />
                </div>
              </div>
              <div className="azzle-faq-body" style={{ display: openIndex === i ? 'block' : 'none' }}>
                <p>{t(item.answerKey)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}