import { useGSAP } from "@gsap/react"; import { useEffect, useLayoutEffect, useRef } from "react";
import { useGsapContext } from "~/app/_providers/GsapProvicer";
import { SplitText } from "gsap/SplitText";
import gsap from 'gsap'
const AnimatedPageTitle = (
  { text, position }: { text: string, position:gsap.Position }
) => {
  const el = useRef<HTMLHeadingElement>(null)
  const gsapContext = useGsapContext();
  useEffect(() => {
    console.log("add animated title with:",position)
    const split = new SplitText(el.current, { type: "chars" })
    gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100 }),position)
    gsapContext?.addAnimation(gsap.from(split.chars, {
      stagger: 0.05, rotate: -90, opacity: 0, x: -10
    }),'>')
  },[])
  return (
    <h1 className="text-4xl opacity-0 font-bold text-balance w-full" ref={el}> {text} </h1>
  )
}

export default AnimatedPageTitle;