import { motion } from 'framer-motion'

const AnimationLayout = ({ children, ...props }) => {
  const transition = {
    ease: 'easeIn',
    duration: 0.2
  }

  return (
    children && (
      <motion.main
        initial={{ opacity: 0, x: 0, y: 0 }}
        animate={{ opacity: 1, x: 0, y: 0 }}
        exit={{ opacity: 0, x: 30, y: 0 }}
        transition={transition}
        {...props}
      >
        {children}
      </motion.main>
    )
  )
}

export default AnimationLayout