import { onBeforeUnmount, onMounted } from 'vue'

export function useScrollReveal(rootRef, selector = '.landing-reveal') {
    let observer = null

    onMounted(() => {
        const elements = rootRef.value?.querySelectorAll(selector) ?? []

        if (!('IntersectionObserver' in window)) {
            elements.forEach((element) => element.classList.add('is-visible'))
            return
        }

        observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible')
                    observer.unobserve(entry.target)
                }
            })
        }, { threshold: 0.05 })

        elements.forEach((element) => observer.observe(element))
    })

    onBeforeUnmount(() => observer?.disconnect())
}