import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { useClickOutside } from "../../hooks";
import DefaultTheme from "../../theme/default";
import Icons from "../icons/index";
import { Content, Icon, Wrapper } from "./styled";
const Tooltip = (props) => {
    const { content, warning } = props;
    const ref = React.useRef(null);
    const [isVisible, setIsVisible] = React.useState(false);
    const theme = props.theme
        ? { ...DefaultTheme.tooltip, ...props.theme }
        : DefaultTheme.tooltip;
    const openModal = React.useCallback((e) => {
        e.stopPropagation();
        setIsVisible((visible) => !visible);
    }, []);
    useClickOutside(ref, () => {
        setIsVisible(false);
    });
    return (_jsxs(Wrapper, { ref: ref, theme: theme, onClick: openModal, className: "ui-toggle", children: [_jsx(Icon, { theme: theme, warning: warning, className: "ui-toggle__icon", children: warning ? _jsx(Icons.Exclamation, {}) : _jsx(Icons.Question, {}) }), _jsx(Content, { visible: isVisible, theme: theme, warning: warning, className: "ui-toggle__content", children: content })] }));
};
export default Tooltip;
//# sourceMappingURL=index.js.map