import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
    static classes = ['visible']

    connect() {
        this.observer = new IntersectionObserver(([entry]) => {
            if (!entry.isIntersecting) return

            this.element.classList.add(this.visibleClass)
            this.observer.disconnect()
        }, { threshold: 0.3 })

        this.observer.observe(this.element)
    }

    disconnect() {
        this.observer?.disconnect()
    }
}