<template>
  <div ref="el" class="scroll-reveal" :style="{ animationDelay: `${delay}ms` }">
    <slot />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  delay?: number
}>()

const el = ref<HTMLElement | null>(null)

onMounted(() => {
  if (!el.value) return

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1, rootMargin: '0px 0px -50px 0px' },
  )

  observer.observe(el.value)

  onUnmounted(() => observer.disconnect())
})
</script>
