/**
 * Tooltip primitive — hover tooltip
 * Positions: top (default), bottom, left, right
 */
const { html } = window;
const { useState, useRef, useCallback } = hooks;

export function Tooltip({ content, position = 'top', children }) {
    const [visible, setVisible] = useState(false);
    const timeout = useRef(null);

    const show = useCallback(() => {
        clearTimeout(timeout.current);
        timeout.current = setTimeout(() => setVisible(true), 200);
    }, []);

    const hide = useCallback(() => {
        clearTimeout(timeout.current);
        setVisible(false);
    }, []);

    return html`
        <span class="sw-tooltip-wrap"
              onMouseEnter=${show}
              onMouseLeave=${hide}
              onFocus=${show}
              onBlur=${hide}>
            ${children}
            ${visible && html`
                <span class="sw-tooltip sw-tooltip--${position}" role="tooltip">
                    ${content}
                </span>
            `}
        </span>
    `;
}
