"use client";

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

export default function FaqHomeTwo() {
  const { t } = useLanguage();
  const [activeIndex, setActiveIndex] = useState<number>(0);
  
  const toggleAccordion = (index: number) => {
    if (activeIndex === index) {
      setActiveIndex(-1); 
    } else {
      setActiveIndex(index);  
    }
  };

  return (
    <div id="faq" className="azzle-section-padding pt-0">
        <div className="container">
          <div className="azzle-section-title font-title center max-width-750" data-aos="fade-up" data-aos-delay="500">
            <h2>{t("faq.title")}</h2>
          </div>
          <div className="azzle-faq-wrap1 wrap2">
            {faq_data.map((item, i) => (
              <div key={i} className={`azzle-faq-item item2 ${activeIndex === i ? "open" : ""}`}>
                <div className="azzle-faq-header header2" onClick={() => toggleAccordion(i)}>
                  <h3>{t(item.questionKey)}</h3>
                  <div className="azzle-active-icon2">
                    <img className="plasicon" src="assets/images/home1/+.svg" alt="plas" width={16} height={16} />
                    <img className="mynusicon" src="assets/images/home2/plas+.svg" alt="plas" width={16} height={16} />
                  </div>
                </div>
                <div
                  className="azzle-faq-body body2"
                  style={{
                    overflow: "hidden",
                    maxHeight: activeIndex === i ? "600px" : "0",
                    transition: "max-height 0.35s ease",
                  }}
                >
                  <p>{t(item.answerKey)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
  );
}