import { onMounted, onUnmounted } from 'vue'
import type { Ref } from 'vue'

export const useClickOutside = (target: Ref<HTMLElement | null>, callback: () => void) => {
  const onClick = (event: MouseEvent) => {
    if (target.value && !target.value.contains(event.target as Node)) {
      callback()
    }
  }

  onMounted(() => {
    document.addEventListener('click', onClick)
  })

  onUnmounted(() => {
    document.removeEventListener('click', onClick)
  })
}