import { motion } from "framer-motion"
import { useLocation } from "react-router-dom"
import { type ReactNode } from "react"

interface PageTransitionProps {
  children: ReactNode
}

/**
 * Enveloppe chaque page dans une transition d'entrée subtile :
 * légère remontée + fade-in. Utilise la clé `location.pathname`
 * pour que framer-motion rejoue l'animation à chaque navigation.
 */
export function PageTransition({ children }: PageTransitionProps) {
  const location = useLocation()
  return (
    <motion.div
      key={location.pathname}
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.div>
  )
}
