'use client'

import { useEffect } from 'react'

interface ScrollAnimationsProps {
  /** Cuando cambia, re-observa los .fade-in (útil en listados filtrados que re-renderizan) */
  observeKey?: string
}

export default function ScrollAnimations({ observeKey }: ScrollAnimationsProps = {}) {
  useEffect(() => {
    const observerOptions = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1,
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible')
          observer.unobserve(entry.target)
        }
      })
    }, observerOptions)

    const observeAll = () => {
      document.querySelectorAll('.fade-in').forEach((el) => {
        if (!el.classList.contains('visible')) {
          observer.observe(el)
        }
      })
    }

    observeAll()

    return () => {
      observer.disconnect()
    }
  }, [observeKey])

  return null
}