import { Outlet, useRouter } from '@tanstack/react-router';
import { AnimatePresence, motion } from 'framer-motion';

const AnimatedOutlet = () => {
  const router = useRouter();
  
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={router.state.location.pathname}
        initial={{ x: '100%', opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        exit={{ x: '-100%', opacity: 0 }}
        transition={{
          type: 'tween',
          duration: 0.3,
          ease: 'easeInOut'
        }}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%'
        }}
      >
        <Outlet />
      </motion.div>
    </AnimatePresence>
  );
}

export default AnimatedOutlet;