"use client";
import { motion } from "framer-motion";
import { ReactNode } from "react";
import { PAGE_VARIANTS } from "./MotionConfig";
import { useMotionContext } from "./MotionProvider";

interface PageTransitionProps {
  children: ReactNode;
  className?: string;
}

export function PageTransition({ children, className }: PageTransitionProps) {
  const { reducedMotion } = useMotionContext();

  if (reducedMotion) return <div className={className}>{children}</div>;

  return (
    <motion.div
      className={className}
      variants={PAGE_VARIANTS}
      initial="initial"
      animate="enter"
      exit="exit"
    >
      {children}
    </motion.div>
  );
}