import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState, } from 'react';
import { InfoIcon } from '../../../lib/icons/Info.js';
import { InfoDarkIcon } from '../../../lib/icons/InfoDark.js';
export function Tooltip({ children }) {
    const [isOpen, setIsOpen] = useState(false);
    useEffect(() => {
        const handleClose = () => {
            setIsOpen(false);
        };
        const handleEscape = (event) => {
            if (event.key === 'Escape') {
                handleClose();
            }
        };
        if (isOpen) {
            globalThis.document?.addEventListener('click', handleClose);
            globalThis.addEventListener?.('keydown', handleEscape);
        }
        return () => {
            globalThis.document?.removeEventListener('click', handleClose);
            globalThis.removeEventListener?.('keydown', handleEscape);
        };
    }, [isOpen, setIsOpen]);
    const handleToggle = (event) => {
        event.stopPropagation();
        setIsOpen((prev) => !prev);
    };
    return (_jsxs("div", { className: 'seam-tooltip', children: [_jsx("div", { className: 'seam-tooltip-trigger-wrap', children: _jsxs("button", { onClick: handleToggle, className: 'seam-tooltip-button', children: [_jsx("div", { className: 'seam-tooltip-button-icon seam-tooltip-button-icon-default', children: _jsx(InfoIcon, {}) }), _jsx("div", { className: 'seam-tooltip-button-icon seam-tooltip-button-icon-hover', children: _jsx(InfoDarkIcon, {}) })] }) }), _jsx("div", { className: 'seam-tooltip-popover', "aria-expanded": isOpen, onClick: (event) => {
                    event.stopPropagation();
                }, children: _jsx("p", { className: 'seam-tooltip-text', children: children }) })] }));
}
//# sourceMappingURL=Tooltip.js.map