import React from 'react';
import { motion } from 'framer-motion';

const pageVariants = {
	initial: {
		opacity: 0,
		x: 20
	},
	animate: {
		opacity: 1,
		x: 0,
		transition: {
			duration: 0.3,
			ease: "easeInOut"
		}
	},
	exit: {
		opacity: 0,
		x: -20,
		transition: {
			duration: 0.2,
			ease: "easeInOut"
		}
	}
};

const AnimatedPageWrapper = ({ children }) => {
	return (
		<motion.div
			initial="initial"
			animate="animate"
			exit="exit"
			variants={pageVariants}
			style={{ width: '100%', height: '100%' }}
		>
			{children}
		</motion.div>
	);
};

export default AnimatedPageWrapper;