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

export const App = () => {
  const [scope, animate] = useAnimate();
  const [count, setCount] = useState(0);
  const animation = useRef(null);

  useEffect(() => {
    animation.current = animate(
      ".thingy",
      { 
        y: [0, "50%", "50%", 0, 0]
      },
      { repeat: Infinity, duration: 2.5, delay: stagger(-1.25) },
    );
  }, []);

  return (
    <div className="grid min-h-dvh place-items-center" ref={scope}>
      <div className="grid [&_*]:[grid-area:1/1] place-items-center">
        <div className="thingy w-36 h-36 border-2 border-white rounded-full origin-center"/>
        <div className="thingy w-36 h-36 bg-white rounded-full origin-center"/>
      </div>
      
      <div className="flex gap-8">
        <button
          className="rounded-md bg-white px-4 py-2 text-black"
          onClick={() => animation.current?.play()}
        >
          Play
        </button>
        <button
          className="rounded-md bg-white px-4 py-2 text-black"
          onClick={() => animation.current?.pause()}
        >
          Stop
        </button>
      </div>
    </div>
  );
};

export default App;