import { useEffect } from 'react';

/**
 * Custom hook that detects clicks outside of the specified element.
 *
 * @param ref - A React ref to the element to detect outside clicks of
 * @param onClickOutside - Callback to execute when an outside click is detected
 */
export function useClickOutside(ref: React.RefObject<HTMLElement>, onClickOutside: () => void) {
    useEffect(() => {
        const handleClickOutside = (e: MouseEvent) => {
            if (ref.current && !ref.current.contains(e.target as Node)) {
                onClickOutside();
            }
        };

        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [ref, onClickOutside]);
}