import React, { useState, useEffect } from "react";

import { getFaq } from "@/services/cmsService";



const Faq = () => {

  const [faqs, setFaqs] = useState([]);

  useEffect(() => {
    const fetchFaqs = async () => {
      const response = await getFaq();
      setFaqs(response.data);
    };
    fetchFaqs();
  }, []);

  
  const [activeIndex, setActiveIndex] = useState(0); // first open


  const toggleFAQ = (index) => {
    setActiveIndex(index === activeIndex ? -1 : index);
  };

  return (
    <>
      <section className="abouthcontainer">
        <div className="abouthinner">
          <div className="container">
            <div className="row">
              <div className="col-12">
                <div className="abouthcontent">

                  {/* Heading */}
                  <div className="section-heading mb-2" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={500}>
                    <div className="subheading">FAQ</div>
                    <h2>Frequently Asked Questions</h2>
                  </div>
                  <div className="" data-aos="fade-down" data-aos-delay={1000} data-aos-duration={1200}>
                    {/* FAQ List */}
                    {faqs.map((item, index) => (
                      <div
                        key={index}
                        className={`faq-item ${activeIndex === index ? "active" : ""}`}
                        onClick={() => toggleFAQ(index)}
                      >
                        <div className="faq-question">
                          <h6 className="m-0">{item.question}</h6>
                          <span>
                            {activeIndex === index ? (
                              <i className="icon icon-minus"></i>
                            ) : (
                              <i className="icon icon-plus"></i>
                            )}
                          </span>
                        </div>

                        {activeIndex === index && (
                          <div className="faq-answer">
                            <p>{item.answers}</p>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Faq;