import type { RefObject } from "react";
import { useEffect } from "react";

export function useClickOutside(
	ref: RefObject<HTMLElement | null>,
	onClose: () => void,
	active = true,
): void {
	useEffect(() => {
		if (!active) return;

		function handleMouseDown(e: MouseEvent) {
			if (ref.current && !ref.current.contains(e.target as Node)) {
				onClose();
			}
		}
		function handleKeyDown(e: KeyboardEvent) {
			if (e.key === "Escape") onClose();
		}
		document.addEventListener("mousedown", handleMouseDown);
		document.addEventListener("keydown", handleKeyDown);
		return () => {
			document.removeEventListener("mousedown", handleMouseDown);
			document.removeEventListener("keydown", handleKeyDown);
		};
	}, [ref, onClose, active]);
}