import { useEffect } from 'react';

export function useOutsideElementClick(ref: React.RefObject<HTMLElement | null>, handler: () => void) {
  const onClick = (e: MouseEvent) => {
    if (ref.current && !ref.current.contains(e.composedPath()[0] as Node)) {
      handler();
    }
  };

  useEffect(() => {
    document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  });
}