import { useEffect } from 'react'

export default function clickOutSideToClose(
  ref: React.RefObject<HTMLDivElement>,
  closeFunction: () => void
) {
  function handleClickOutside(event: MouseEvent) {
    if (ref.current && !ref.current.contains(event.target as Node) ) {
      closeFunction()
    }
  }

  useEffect(() => {
    document.addEventListener('mouseup', handleClickOutside)
    return () => document.removeEventListener('mouseup', handleClickOutside)
  }, [ref])
}