import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from "react";
import { useClickOutside } from "../../../hooks/common";
import { Container, LabelWrapper, Label, Content } from "./dropdown.styled";
import ArrowIcon from "./arrow-icon";
const Dropdown = ({ label, children, opened, className, hideArrow, onClick, handleClickLabel, handleClickOutside = () => undefined, }) => {
    const ref = useRef(null);
    useClickOutside(ref, handleClickOutside);
    return (_jsxs(Container, { ref: ref, className: `ui-dropdown ${className ?? ""}`, children: [_jsxs(LabelWrapper, { onClick: onClick, children: [_jsx(Label, { onClick: handleClickLabel, children: label }), !hideArrow && _jsx(ArrowIcon, { onClick: handleClickLabel, opened: opened })] }), _jsx(Content, { className: `ui-dropdown__content${opened ? "" : " hidden"}`, children: children })] }));
};
export default Dropdown;
//# sourceMappingURL=dropdown.js.map