'use client'
import { useState, useRef, useEffect } from 'react';

export default function FAQAccordion({ faqs = [], className = '' }) {
    const [activeIndex, setActiveIndex] = useState(0);
    const refs = useRef([]);

    useEffect(() => {
        refs.current = refs.current.slice(0, faqs.length);
    }, [faqs]);

    useEffect(() => {
        if (faqs.length > 0) {
            setTimeout(() => {
                setActiveIndex(0);
            }, 100);
        }
    }, [faqs.length]);

    if (!faqs || faqs.length === 0) return null;

    return (
        <section className={`faq-section ${className}`}>
            <div className="sec-title">
                {/* <div className="title">FAQ</div> */}
                <h2>FAQs</h2>
                {/* <div className="separate"></div> */}
            </div>

            <div className="faq-wrapper">
                {faqs.map((item, i) => (
                    <div
                        key={i}
                        className={`faq-block ${activeIndex === i ? 'active' : ''}`}
                    >
                        <button
                            type="button"
                            className="faq-question"
                            onClick={() => setActiveIndex(activeIndex === i ? null : i)}
                            aria-expanded={activeIndex === i}
                            aria-controls={`faq-answer-${i}`}
                        >
                            <h3>{item.q}</h3>
                            <span className={`icon fa ${activeIndex === i ? 'fa-angle-up' : 'fa-angle-down'}`} />
                        </button>

                        <div
                            id={`faq-answer-${i}`}
                            ref={(el) => (refs.current[i] = el)}
                            className="faq-answer"
                            style={{
                                maxHeight:
                                    activeIndex === i
                                        ? "1000px"
                                        : "0px",
                                overflow: "hidden",
                                transition: "max-height 0.4s ease",
                            }}
                            aria-hidden={activeIndex !== i}
                        >
                            <div className="faq-answer-inner">
                                <p dangerouslySetInnerHTML={{ __html: item.a }} />
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </section>
    );
}