import { useState, useEffect } from "react";

const MouseTracker = ({ text = "Tooltip" }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY - 60 });
      setVisible(true);
    };

    const handleMouseLeave = () => {
      setVisible(false);
    };

    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("mouseleave", handleMouseLeave);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, []);

  return visible && text ? (
    <div
      style={{
        position: "fixed",
        left: `${position.x}px`,
        top: `${position.y}px`,
        transform: "translateX(-50%)",
        background: "rgba(0,0,0,0.8)",
        color: "#fff",
        padding: "6px 12px",
        borderRadius: "5px",
        fontSize: "16px",
        fontWeight: 450,
        pointerEvents: "none",
        transition: "opacity 0.2s ease",
        opacity: visible ? 1 : 0,
        zIndex: 1000,
      }}
    >
      {text}
    </div>
  ) : null;
};

export default MouseTracker;