import { useEffect, useRef } from 'react'
import gsap from 'gsap'

export function TextReveal({ text }) {
  const ref = useRef(null)

  useEffect(() => {
    const chars = ref.current.querySelectorAll('.char')

    gsap.fromTo(
      chars,
      { opacity: 0, y: 20 },
      {
        opacity: 1,
        y: 0,
        duration: 0.5,
        stagger: 0.03,
        ease: 'back.out(1.7)',
      }
    )
  }, [])

  return (
    <h1 ref={ref}>
      {text.split('').map((char, i) => (
        <span key={i} className="char inline-block">
          {char === ' ' ? '\u00A0' : char}
        </span>
      ))}
    </h1>
  )
}