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

export const useIsVisible = (el: Ref<HTMLElement | undefined>) => {
  const isIntersecting = ref(false)
  const observer = ref()

  onMounted(() => {
    observer.value = new IntersectionObserver(([entry]) => {
      isIntersecting.value = entry.isIntersecting
    })

    el.value && observer.value.observe(el.value)
  })

  onUnmounted(() => {
    observer.value.disconnect()
  })

  return isIntersecting
}