import React, { useEffect, useRef } from "react";
export const Dropdown = ({ children, label, className }) => {
    const [isOpen, setIsOpen] = React.useState(false);
    const wrapperRef = useRef(null);
    useEffect(() => {
        function handleClickOutside(event) {
            if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
                setIsOpen((_prevIsOpen) => false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, [wrapperRef]);
    return (React.createElement("div", { className: className + " dropdown-wrapper", ref: wrapperRef },
        React.createElement("div", { className: `toggle ${isOpen ? "active" : ""}`, onClick: () => setIsOpen((prevIsOpen) => !prevIsOpen) },
            React.createElement("span", null, label)),
        React.createElement("div", { className: `menu ${isOpen ? "expanded" : "collapsed"}`, role: "menu" }, children)));
};
