import { useAnimate, stagger } from "motion/react";
import { useEffect, useRef } from "react";

export const App = () => {
  const [scope, animate] = useAnimate();
  const animationRef = useRef(null);

  useEffect(() => {
    // Timeout is only here to show that even registering it later doesn't
    // make it suddenly work. The animation should not be started if autoplay is false.
    setTimeout(() => {
      animationRef.current = animate(".fade-it", {
        opacity: 0.5,
      }, { autoplay: false });
    }, 1000);
  }, []);

  const forwards = () => {
    if (!animationRef.current) return;
    animationRef.current.speed = 1;
    animationRef.current.play();
  };

  const backwards = () => {
    if (!animationRef.current) return;
    animationRef.current.speed = -1;
    animationRef.current.play();
  };

  return (
    <div className="grid min-h-dvh place-items-center gap-8">
      <div ref={scope}>
        <div className="fade-it grid aspect-square place-items-center rounded-full bg-white p-4 opacity-0">
          Have some fade in me.
        </div>

        <div className="mt-4 flex justify-center gap-2">
          <button className="rounded-lg bg-white px-3 py-2" onClick={forwards}>
            Run
          </button>
          <button className="rounded-lg bg-white px-3 py-2" onClick={backwards}>
            Reverse
          </button>
        </div>
      </div>
    </div>
  );
};

export default App;