import useDevice from '@/core/hooks/useDevice'
import { motion } from 'framer-motion'

const AnimationLayout = ({ children, ...props }) => {
  const { isMobile } = useDevice()

  const initialConfig = {
    opacity: 0,
    x: 0,
    y: 0
  }

  const animateConfig = {
    opacity: 1,
    x: 0,
    y: 0,
    transition: { duration: 0.2, ease: 'easeInOut' }
  }

  const exitConfig = {
    opacity: 0,
    x: isMobile ? 30 : 0,
    y: 0,
    transition: { duration: 0.2, ease: 'easeInOut' }
  }

  return (
    children && (
      <motion.main initial={initialConfig} animate={animateConfig} exit={exitConfig} {...props}>
        {children}
      </motion.main>
    )
  )
}

export default AnimationLayout