import { useState } from 'react';

export const useDelayHover = (timeToDelay: number, callback: () => void) => {
  const [delay, setDelay] = useState(timeToDelay);
  const [delayHandler, setDelayHandler] = useState<ReturnType<
    typeof setTimeout
  > | null>(null);

  const handleMouseEnter = () => {
    setDelayHandler(
      setTimeout(() => {
        callback();
      }, delay)
    );
  };

  const handleMouseLeave = () => {
    if (delayHandler) {
      clearTimeout(delayHandler);
    }
  };

  return { handleMouseEnter, handleMouseLeave };
};