import React, { useEffect, useRef, useState } from 'react';
import './ToggleBox.scss';
import settings from "../../../../assets/images/settings.svg";
type ToggleBoxProps = {
    children: React.ReactNode;
};

const ToggleBox: React.FC<ToggleBoxProps> = ({ children }) => {
    const [isOpen, setIsOpen] = useState(false);
    const boxRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            // only run if open
            if (!isOpen) return;

            if (
                boxRef.current &&
                !boxRef.current.contains(event.target as Node)
            ) {
                setIsOpen(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [isOpen]);

    return (
        <div className="toggle-box" ref={boxRef}>
            <div
                className="toggle-box__header"
                onClick={() => setIsOpen(prev => !prev)} // 👈 your logic untouched
            >
                <img src={settings} alt="" />
            </div>

            {isOpen && (
                <div className="toggle-box__content">
                    {children}
                </div>
            )}
        </div>
    );
};

export default ToggleBox;