Infobulle avec délai

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

interface DelayedTooltipProps {
  text?: string;
  delay?: number;
}

export default function DelayedTooltip({
  text = "Fermer la fenêtre",
  delay = 450,
}: DelayedTooltipProps) {
  const [show, setShow] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);

  useEffect(() => () => clearTimeout(timer.current), []);

  return (
    <div
      className="relative text-[#1d1d1f] dark:text-[#f5f5f7]"
      onMouseEnter={() => {
        clearTimeout(timer.current);
        timer.current = setTimeout(() => setShow(true), delay);
      }}
      onMouseLeave={() => {
        clearTimeout(timer.current);
        setShow(false);
      }}
    >
      <button
        type="button"
        aria-label={text}
        className="grid h-11 w-11 place-items-center rounded-full bg-white dark:bg-[#1c1c1e] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
      >
        <X className="h-4 w-4" />
      </button>
      <AnimatePresence>
        {show && (
          <motion.span
            initial={{ opacity: 0, y: 5, scale: 0.96 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 4 }}
            className="absolute bottom-14 left-1/2 w-max -translate-x-1/2 rounded-full bg-[#1d1d1f] px-3 py-1.5 text-xs text-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)] dark:bg-[#f5f5f7] dark:text-black"
          >
            {text}
          </motion.span>
        )}
      </AnimatePresence>
    </div>
  );
}