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

const FAQsSection: React.FC<{ FAQsList: FAQItem[] }> = ({ FAQsList }) => {
    // Active Index State for Faq Item
    const [activeIndex, setActiveIndex] = useState<number | null>(0);

    /**
     * Handles the click event on a FAQ item.
     * If the clicked item is currently active, it will be deactivated.
     * If the clicked item is not currently active, it will be activated.
     * @param {number} index The index of the FAQ item that was clicked.
     */
    const handleFaqClick = (index: number) => {
        setActiveIndex(activeIndex === index ? null : index);
    };
    return (
        <section className={`mt-[30px] sm:mt-[40px] lg:mt-0`}>
            <div className={`container`}>
                {FAQsList?.map((faq: FAQItem, index: number) => (
                    <React.Fragment key={index}>
                        <FaqItem
                            key={index}
                            question={faq.title}
                            answer={faq.description}
                            isActive={activeIndex === index}
                            onClick={() => handleFaqClick(index)}
                        />
                    </React.Fragment>
                ))}
            </div>
        </section>
    )
};

export default FAQsSection;