import { useRef, useEffect, useLayoutEffect, useCallback } from "react";
import { SplitText } from "gsap/SplitText";
import { useAnimate, stagger } from "motion/react";

export const App = () => {
  const [scope, animate] = useAnimate();
  const splitsRef = useRef(null);
  
  useEffect(() => {
    if (!scope.current) return;
    splitsRef.current = SplitText.create(
      scope.current, 
      { 
        type: "chars, words", 
        smartWrap: true,
        wordsClass: "word"  
      }
    );
  }, []);
  
  const onClick = useCallback(() => {
    if (!splitsRef.current) return;

    animate(
      [
        [
          splitsRef.current.words,
          { scaleX: [0, 1] },
          { delay: stagger(0.04) }
        ],
        [
          splitsRef.current.chars, 
          { opacity: [0, 1], x: [20, 0]}, 
          { delay: stagger(0.01)}
        ],
      ],
    );
  }, [splitsRef.current]);
  
  return (
    <div className="grid min-h-dvh place-items-center text-white">
      <div ref={scope} className="flex flex-col items-center">
        <img
          className="mb-8 h-12 w-12"
          src="https://sandpack.frontend.fyi/img/fefyi.svg"
        />
        <h1
          className="mb-6 max-w-[60%] text-balance text-center font-mono text-3xl text-white"
        >
          Time to draw some rectangles
        </h1>
        <a
          href="https://www.frontend.fyi/dev"
          target="_blank"
          className="text-sm uppercase"
        >
          Frontend.FYI Dev Playgrounds
        </a>
      </div>
      <button
        onClick={onClick}
        className="bg-white text-2xl rounded-full text-black px-3 py-1.5">
          Animate
      </button>
    </div>
  );
}