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

export const App = () => {
  const [scope, animate] = useAnimate();
  
  useEffect(() => {
      const controls = animate("h1", { opacity: 0.5, x: 200 }, { autoplay: false });
      
      setTimeout(() => {
        controls.play();
      }, 2000);
  }, [])
  
  return (
    <div ref={scope} className="grid min-h-dvh place-items-center text-white">
      <div 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 opacity-0"
        >
          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>
  );
}