"use client";

import { useState, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";

export default function HeroTooltip({ alt }: { alt: string }) {
  const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null);
  const timerRef = useRef<NodeJS.Timeout | null>(null);

  return (
    <div
      className="absolute inset-0 z-[5]"
      onMouseMove={(e) => {
        const r = e.currentTarget.getBoundingClientRect();
        if (timerRef.current) clearTimeout(timerRef.current);
        setTooltipPos(null);
        timerRef.current = setTimeout(
          () => setTooltipPos({ x: e.clientX - r.left, y: e.clientY - r.top }),
          1000
        );
      }}
      onMouseLeave={() => {
        if (timerRef.current) clearTimeout(timerRef.current);
        setTooltipPos(null);
      }}
    >
      <AnimatePresence>
        {tooltipPos && alt && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.12 }}
            style={{
              position: "absolute",
              left: tooltipPos.x,
              top: tooltipPos.y,
              transform: "translate(-50%, calc(-100% - 8px))",
              pointerEvents: "none",
              zIndex: 100,
              whiteSpace: "nowrap",
            }}
            className="rounded border border-black bg-white px-3 py-1.5 text-sm font-semibold text-black shadow-sm"
          >
            {alt}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}