"use client";

import { AnimatePresence, motion } from "motion/react";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { useReducedMotion } from "@/app/hooks/useReducedMotion";

interface RouteTransitionProps {
  children: ReactNode;
}

export function RouteTransition({ children }: Readonly<RouteTransitionProps>) {
  const pathname = usePathname();
  const shouldReduceMotion = useReducedMotion();

  return (
    <AnimatePresence mode="wait" initial={false}>
      <motion.div
        key={pathname}
        initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -20 }}
        transition={
          shouldReduceMotion
            ? { duration: 0.2 }
            : {
                opacity: { duration: 0.3, ease: [0.16, 1, 0.3, 1] },
                y: {
                  duration: 0.4,
                  ease: [0.16, 1, 0.3, 1],
                },
              }
        }
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}