import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from "react";
import { Container, Icon, Content } from "./dropdown-icon.styled";
import { useClickOutside } from "../../../hooks";
const DropdownIcon = ({ icon, children, opened, className, handleClickIcon, handleClickOutside = () => undefined, externalElementRef, }) => {
    const defaultRef = useRef(null);
    useClickOutside(externalElementRef ?? defaultRef, handleClickOutside);
    return (_jsxs(Container, { ref: defaultRef, className: `ui-dropdown-icon ${className ?? ""}`, children: [_jsx(Icon, { className: "ui-dropdown-icon__icon", onClick: handleClickIcon, children: icon }), _jsx(Content, { className: `ui-dropdown-icon__content${opened ? "" : " hidden"}`, children: children })] }));
};
export default DropdownIcon;
//# sourceMappingURL=dropdown-icon.js.map