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

export const App = () => {  
  return (
    <div className="px-8">
      <p className="text-white text-center pt-8 pb-[100vh]">Scroll down and see the logo animate in</p>
      <Card title="Hello" />
    </div>
  );
};

const Card = ({ title }) => {
  const [scope, animate] = useAnimate();
  const inViewRef = useRef(null);
  const isInView = useInView(inViewRef);
  const controlsRef = useRef(null);
  
  useEffect(() => {
    controlsRef.current = animate([
      [scope.current, { opacity: 1 }],
    ], {autoplay: false});    
  }, []);
  
  useEffect(() => {
    if (!controlsRef.current) return;
    
    controlsRef.current.speed = isInView ? 1 : -1;
    controlsRef.current.play();
  }, [isInView])
  
  return (
    <>
      <section className="h-[20vh] bg-gray-100 mb-8 p-6" ref={inViewRef}>
        When this block is in view, the aside should fade in
        
        <aside
          ref={scope}
          className="fixed top-0 left-0 bar text-black bg-white rounded-2xl px-6 py-12 opacity-0">
          <p>{title}</p>
        </aside>
      </section>
    </>
  );
}