"use client";
/* 
  This is the FAQs component for the home page.
*/
import FaqItem from "@/src/components/FaqItem";
import { FAQItem } from "@/src/types/api/faqs.type";
import { HomeContent } from "@/src/types/StaticContent/home.content.type";
import React, { useState } from "react";

// Define the static content type for the FAQs component
interface FAQsProps {
  FAQs: HomeContent["FAQS"];
  FAQsList: FAQItem[];
}
const FAQs: React.FC<FAQsProps> = ({ FAQs, FAQsList }) => {

  // This state is used to toggle the FAQ item
  const [activeIndex, setActiveIndex] = useState<number | null>(0);
  const handleFaqClick = (index: number) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  return (
    <>
      <section
        className={`my-[30px] sm:my-[40px] md:my-[50px] xl:my-[60px] xxl:my-[80px] xxxl:my-[100px]`}
      >
        <div className={`container`}>
          <h2 className="text-center !mb-5 sm:!mb-7 lg:!mb-9 xl:!mb-16">
            {FAQs.TITLE}
          </h2>
          {FAQsList?.map((item: FAQItem, index: number) => {
            return (
              <React.Fragment key={index}>
                <FaqItem
                  key={index}
                  question={item.title}
                  answer={item.description}
                  isActive={activeIndex === index}
                  onClick={() => handleFaqClick(index)}
                />
              </React.Fragment>
            );
          })}
        </div>
      </section>
    </>
  );
};

export default FAQs;