import { motion, useReducedMotion } from "framer-motion";
import { useEffect } from "react";

export function PageTransition({ children, routeKey, className = "" }) {
  const reduceMotion = useReducedMotion();

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [routeKey]);

  return (
    <motion.div
      key={routeKey}
      className={className}
      initial={
        reduceMotion
          ? false
          : {
              opacity: 0,
              y: 22,
              scale: 0.992,
              filter: "blur(0.3125rem)",
            }
      }
      animate={{
        opacity: 1,
        y: 0,
        scale: 1,
        filter: "blur(0)",
      }}
      exit={
        reduceMotion
          ? { opacity: 1 }
          : {
              opacity: 0,
              y: -12,
              scale: 0.996,
              filter: "blur(0.1875rem)",
            }
      }
      transition={{
        duration: reduceMotion ? 0 : 0.4,
        ease: [0.2, 0, 0, 1],
      }}
    >
      {children}
    </motion.div>
  );
}
