import React from 'react';
import Layer from './Layer';
import { useEventListener } from '../hooks/useEventListener';

interface FloatingTooltipProps {
  top: number;
  left: number;
  className?: string;
  style?: React.CSSProperties;
  children: React.ReactNode;
}

export const FloatingTooltip = ({
  top,
  left,
  className,
  style,
  children,
}: FloatingTooltipProps) => {
  const tooltip = React.useRef<HTMLDivElement>(null);

  useEventListener('mousemove', (ev: MouseEvent) => {
    if (tooltip.current) {
      tooltip.current.style.top = ev.clientY + 'px';
      tooltip.current.style.left = ev.clientX + 'px';
    }
  });

  return (
    <Layer>
      <div
        ref={tooltip}
        className={className}
        style={{
          transform: 'translateX(-50%) translateY(-100%)',
          paddingBottom: 8,
          ...style,
          position: 'fixed',
          top,
          left,
          zIndex: 99999,
          pointerEvents: 'none',
        }}
      >
        {children}
      </div>
    </Layer>
  );
};