export default defineNuxtPlugin((nuxtApp) => {
  /**
   * Directive that calls a callback when an element gets visible in the viewport.
   */
  nuxtApp.vueApp.directive('on-visible', {
    mounted(el, binding) {
      const callback = binding.value

      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              callback(entry)
              observer.disconnect()
            }
          })
        },
        { threshold: 0.5 }
      )

      observer.observe(el)
    }
  })
})