import { useState } from "react";

export default function useHoverable(delay: number = 0) {
	const [isHovered, setIsHovered] = useState(false);

	const [stateTimeout, setStateTimeout] = useState<NodeJS.Timeout | null>(null);

	const handleMouseEnter = () => {
		if (stateTimeout) clearTimeout(stateTimeout);
		setIsHovered(true);
	};

	const handleMouseLeave = () => {
		setStateTimeout(
			setTimeout(() => {
				setIsHovered(false);
			}, delay),
		);
	};

	return {
		isHovered,
		handleMouseEnter,
		handleMouseLeave,
	};
}