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

function FAQInteractive({ data }) {
    const [openStates, setOpenStates] = useState({});
    useEffect(() => {
        // Progressive enhancement: Add interactivity to existing DOM elements
        data.items.forEach((item) => {
            const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
            const contentDiv = document.querySelector(`[data-faq-content="${item.id}"]`);
            const iconSvg = document.querySelector(`[data-faq-icon="${item.id}"]`);
            if (toggleButton && contentDiv && iconSvg) {
                const handleClick = () => {
                    const isOpen = openStates[item.id] || false;
                    const newOpenState = !isOpen;
                    // Update state
                    setOpenStates(prev => (Object.assign(Object.assign({}, prev), { [item.id]: newOpenState })));
                    // Update DOM
                    if (newOpenState) {
                        contentDiv.classList.remove('hidden');
                        toggleButton.setAttribute('aria-expanded', 'true');
                        iconSvg.style.transform = 'rotate(90deg)';
                    }
                    else {
                        contentDiv.classList.add('hidden');
                        toggleButton.setAttribute('aria-expanded', 'false');
                        iconSvg.style.transform = 'rotate(0deg)';
                    }
                };
                toggleButton.addEventListener('click', handleClick);
                // Cleanup function will be handled by the effect cleanup
            }
        });
        // Cleanup event listeners
        return () => {
            data.items.forEach((item) => {
                var _a;
                const toggleButton = document.querySelector(`[data-faq-toggle="${item.id}"]`);
                if (toggleButton) {
                    // Remove all event listeners by cloning the element
                    const newButton = toggleButton.cloneNode(true);
                    (_a = toggleButton.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(newButton, toggleButton);
                }
            });
        };
    }, [data, openStates]);
    return null; // Progressive enhancement - no additional DOM rendering
}

export { FAQInteractive };
