/**
 * Click Outside Detection Hook
 * Detects clicks outside of a referenced element and triggers a handler
 */

import { RefObject, useEffect } from 'react';

/**
 * Hook that triggers a handler when user clicks outside the referenced element
 * Useful for closing dropdowns, modals, or menus when clicking outside
 *
 * @param ref - React ref object pointing to the element to monitor
 * @param handler - Callback function to execute when click occurs outside the element
 *
 * @example
 * const menuRef = useRef<HTMLDivElement>(null);
 * useOnClickOutside(menuRef, () => setMenuOpen(false));
 */
export function useOnClickOutside(ref: RefObject<HTMLElement>, handler: (event: MouseEvent | TouchEvent) => void) {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      if (!ref.current || ref.current.contains(event.target as Node)) {
        return;
      }
      handler(event);
    };

    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [ref, handler]);
}