import { useAnimate } from "motion/react";
import { useEffect, useState, useRef } from "react";
import "./styles.css";

export function App() {
  const [scope, animate] = useAnimate();
  const controlsRef = useRef(null);
  const [isExpanded, setIsExpanded] = useState(false);
  
  useEffect(() => {
    controlsRef.current = animate([
      ['.text', {y: [-20, 0], opacity: [0.5, 1]}],
      ['.logo', {scale: [0.5, 1], backgroundColor: ["#fff", "#f00"]}, { at: "-0.1" }]
    ], { autoplay: false });
  }, [])

  useEffect(() => {
    
    if (!controlsRef.current) return;

    controlsRef.current.speed = isExpanded ? 1 : -1;
    controlsRef.current.play();
  
  }, [isExpanded]);

  return (
    <div ref={scope} className="grid min-h-dvh place-items-center">
      <div className="flex flex-col items-center gap-3 text-white">
        <div className="logo w-32 rounded-md bg-white p-6">
          <Logo />
        </div>
        <p className="text">Logo mark</p>
        
        <div>
          <button
            onClick={() => setIsExpanded(expanded => !expanded)}
            className="text-black bg-white px-6 py-3 rounded-md mt-6">Toggle animation</button>
        </div>
      </div>
    </div>
  );
}

const Logo = () => (
  <svg
    className="h-full w-full"
    xmlns="http://www.w3.org/2000/svg"
    fill="#000000"
    viewBox="-52.01 0 560.035 560.035"
  >
    <path d="M380.844 297.529c.787 84.752 74.349 112.955 75.164 113.314-.622 1.988-11.754 40.191-38.756 79.652-23.343 34.117-47.568 68.107-85.731 68.811-37.499.691-49.557-22.236-92.429-22.236-42.859 0-56.256 21.533-91.753 22.928-36.837 1.395-64.889-36.891-88.424-70.883-48.093-69.53-84.846-196.475-35.496-282.165 24.516-42.554 68.328-69.501 115.882-70.192 36.173-.69 70.315 24.336 92.429 24.336 22.1 0 63.59-30.096 107.208-25.676 18.26.76 69.517 7.376 102.429 55.552-2.652 1.644-61.159 35.704-60.523 106.559M310.369 89.418C329.926 65.745 343.089 32.79 339.498 0 311.308 1.133 277.22 18.785 257 42.445c-18.121 20.952-33.991 54.487-29.709 86.628 31.421 2.431 63.52-15.967 83.078-39.655" />
  </svg>
);