useHover Hook

import { useState, useEffect, RefObject, useCallback } from 'react';

function useHover<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>
): boolean {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseEnter = useCallback(() => setIsHovering(true), []);
  const handleMouseLeave = useCallback(() => setIsHovering(false), []);

  useEffect(() => {
    const element = ref.current;
    __TOKEN_19__ (!element) return;

    element.addEventListener('mouseenter', handleMouseEnter);
    element.addEventListener('mouseleave', handleMouseLeave);

    __TOKEN_21__ () => {
      element.removeEventListener('mouseenter', handleMouseEnter);
      element.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [ref, handleMouseEnter, handleMouseLeave]);

  return isHovering;
}

// Usage example
// const buttonRef = useRef<HTMLButtonElement>(null);
// const isButtonHovered = useHover(buttonRef);
// <button ref={buttonRef} style={{ backgroundColor: isButtonHovered ? 'blue' : 'gray' }}>
//   Hover Me
// </button>