import React from "https://esm.sh/react@19.0.0";
import ReactDOM from "https://esm.sh/react-dom@19.0.0/client";

import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@19.0.0";

gsap.registerPlugin(useGSAP);

const { useRef } = React;

const Box = ({ children, className, anim }) => {
  return (
    <div className={"box " + className} data-animate={anim}>
      {children}
    </div>
  );
};

function App() {
  const container = useRef();

  useGSAP(() => {
    // Target the two specific elements we have asigned the animate class
    gsap.to("[data-animate='rotate']", {
      rotation: 360,
      repeat: -1,
      repeatDelay: 1,
      yoyo: true
    });

    gsap.to("[data-animate='move']", {
      x: 50,
      repeat: -1,
      repeatDelay: 1,
      yoyo: true
    });

   }, {scope: container}); // <-- scope for selector text (optional)

  return (
    <div className="app" ref={container}>
      <Box anim="rotate" className="gradient-blue">Box</Box>
      <Box className="dont-animate gradient-red">Don't Animate</Box>
      <Box anim="move" className="gradient-blue">Box</Box>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);