'use client';
import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
import { useRef, useState } from 'react';
import { Paragraph } from '../Paragraph';
const ARROW_HEIGHT = 7;
const GAP = 2;
/**
 * Tooltip component for displaying a floating tooltip with customizable message and placement.
 *
 * @component
 * @example
 * // Example usage of Tooltip component
 * <Tooltip message="This is a tooltip" placement="top">
 *   <button>Hover me</button>
 * </Tooltip>
 *
 * @param {Object} props - The properties of the Tooltip component.
 * @param {string} props.message - The message to be displayed inside the tooltip.
 * @param {ReactNode} props.children - The content that triggers the tooltip on hover or focus.
 * @param {UseFloatingOptions['placement']} [props.placement] - The placement of the tooltip relative to the trigger element.
 *
 * @returns {ReactNode} The rendered Tooltip component.
 */
export function Tooltip({ message, children, placement, }) {
    const arrowRef = useRef(null);
    const [isOpen, setIsOpen] = useState(false);
    const { refs, floatingStyles, context } = useFloating({
        open: isOpen,
        onOpenChange: setIsOpen,
        placement,
        // Make sure the tooltip stays on the screen
        whileElementsMounted: autoUpdate,
        middleware: [
            offset(ARROW_HEIGHT + GAP),
            flip({
                fallbackAxisSideDirection: 'start',
            }),
            shift(),
            arrow({
                element: arrowRef,
            }),
        ],
    });
    // Event listeners to change the open state
    const hover = useHover(context, { move: false });
    const focus = useFocus(context);
    const dismiss = useDismiss(context);
    // Role props for screen readers
    const role = useRole(context, { role: 'tooltip' });
    // Merge all the interactions into prop getters
    const { getReferenceProps, getFloatingProps } = useInteractions([
        hover,
        focus,
        dismiss,
        role,
    ]);
    return (<>
      <div className="inline-block" ref={refs.setReference} {...getReferenceProps()}>
        {children}
      </div>
      <FloatingPortal>
        {!!isOpen && (<div className="z-50 rounded-sm bg-black px-4 py-1 text-white" ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
            <FloatingArrow className="fill-black" ref={arrowRef} context={context}/>
            <Paragraph size="body-2">{message}</Paragraph>
          </div>)}
      </FloatingPortal>
    </>);
}
//# sourceMappingURL=Tooltip.jsx.map