import React from 'react';
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
import { Outlet, useLocation, useNavigationType } from 'react-router-dom';

export default function MobileAnimatedOutlet() {
  const location = useLocation();
  const navigationType = useNavigationType();
  const reduceMotion = useReducedMotion();
  const direction = navigationType === 'POP' ? -1 : 1;

  const variants = reduceMotion
    ? {
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        exit: { opacity: 0 },
      }
    : {
        initial: { opacity: 0, x: 16 * direction },
        animate: { opacity: 1, x: 0 },
        exit: { opacity: 0, x: -16 * direction },
      };

  return (
    <AnimatePresence mode="wait" initial={false}>
      <motion.div
        key={location.key}
        initial="initial"
        animate="animate"
        exit="exit"
        variants={variants}
        transition={{ duration: 0.22, ease: 'easeOut' }}
        style={{ height: '100%' }}
      >
        <Outlet />
      </motion.div>
    </AnimatePresence>
  );
}