import { useAnimate } from "motion/react";
import { useEffect } from "react";

export const App = () => {
  const [scope, animate] = useAnimate();
  
  useEffect(() => {
    animate(
      [
        [
          "img", 
          {
            x: [0, 20],
            y: [0, 20]
          }
        ],
        [
          "h1",
          {
            scale: [1, 2]
          }
        ]
      ], 
      {defaultTransition: {type: "spring" }}
    );
  }, [])
  
  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>
    </div>
  );
}