'use client'

import { useEffect, useRef } from 'react'

/**
 * Ajoute la classe CSS 'shown' à l'élément dès qu'il entre dans le viewport.
 * Utilise la classe .reveal définie dans globals.css (opacity + translateY).
 */
export function useReveal<T extends HTMLElement = HTMLDivElement>() {
  const ref = useRef<T>(null)

  useEffect(() => {
    const el = ref.current
    if (!el) return

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          el.classList.add('shown')
          observer.disconnect()
        }
      },
      { threshold: 0.1 }
    )

    observer.observe(el)
    return () => observer.disconnect()
  }, [])

  return ref
}