'use client';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Paragraph } from '../../01-atoms';
import { useAccordionContext } from './AccordionContext';
import { FaChevronDown } from 'react-icons/fa';
import clsx from 'clsx';
/**
 * AccordionSection component for displaying a collapsible section within an Accordion.
 *
 * @component
 * @example
 * // Example usage of AccordionSection component
 * <AccordionSection title="Section 1" id="section1">
 *   Content 1
 * </AccordionSection>
 *
 * @param {Object} props - The properties of the AccordionSection component.
 * @param {string} props.title - The title of the section.
 * @param {ReactNode} props.children - The content to be displayed within the section.
 * @param {string} props.id - The unique identifier for the section.
 *
 * @returns {ReactNode} The rendered AccordionSection component.
 */
export function AccordionSection({ title, children, id, }) {
    const context = useAccordionContext();
    const isActivated = context.activated.includes(id);
    const contentRef = useRef(null);
    const [maxHeight, setMaxHeight] = useState('0px');
    const updateHeight = useCallback(() => {
        if (!contentRef.current) {
            return;
        }
        setMaxHeight(isActivated ? `${contentRef.current.scrollHeight}px` : '0px');
    }, [isActivated]);
    useEffect(() => {
        updateHeight();
    }, [isActivated, updateHeight]);
    useEffect(() => {
        window.addEventListener('resize', updateHeight);
        return () => window.removeEventListener('resize', updateHeight);
    }, [updateHeight]);
    return (<section>
      <div className={clsx('mb-2 flex cursor-pointer items-center justify-between rounded-full border-b-[3px] px-4 py-2 transition-colors duration-300 ease-in-out', isActivated ? 'border-lavender' : 'border-gray-2')} onClick={() => context.toggleId(id)}>
        <Paragraph size="subtitle-1">{title}</Paragraph>
        <FaChevronDown className={clsx('transition-transform duration-300 ease-in-out', isActivated && 'rotate-180 transform')}/>
      </div>
      <div ref={contentRef} style={{ maxHeight }} className="overflow-hidden transition-all duration-300 ease-in-out">
        {children}
      </div>
    </section>);
}
//# sourceMappingURL=AccordionSection.jsx.map