import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

export default function PageTransition({ children }) {
  const router = useRouter();
  const [isAnimating, setIsAnimating] = useState(false);
  const [displayChildren, setDisplayChildren] = useState(children);

  useEffect(() => {
    const handleRouteChangeStart = () => {
      setIsAnimating(true);
    };

    const handleRouteChangeComplete = () => {
      setDisplayChildren(children);
      setTimeout(() => {
        setIsAnimating(false);
      }, 50);
    };

    router.events.on('routeChangeStart', handleRouteChangeStart);
    router.events.on('routeChangeComplete', handleRouteChangeComplete);

    return () => {
      router.events.off('routeChangeStart', handleRouteChangeStart);
      router.events.off('routeChangeComplete', handleRouteChangeComplete);
    };
  }, [router, children]);

  useEffect(() => {
    if (!isAnimating) {
      setDisplayChildren(children);
    }
  }, [children, isAnimating]);

  return (
    <div className={`page-transition ${isAnimating ? 'page-transition--entering' : 'page-transition--active'}`}>
      {displayChildren}
    </div>
  );
}