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

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

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

    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}`}
                            >
                                <h5>{item.q}</h5>
                                <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
                                            ? `${refs.current[i]?.scrollHeight || 0}px`
                                            : "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>
    );
}