'use client'

import { ReactNode } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

interface SlideContainerProps {
  children: ReactNode
  slideKey: string
  direction: number
}

const variants = {
  enter: (direction: number) => ({
    x: direction > 0 ? '30%' : '-30%',
    opacity: 0,
    scale: 0.95,
  }),
  center: {
    x: 0,
    opacity: 1,
    scale: 1,
  },
  exit: (direction: number) => ({
    x: direction < 0 ? '30%' : '-30%',
    opacity: 0,
    scale: 0.95,
  }),
}

export default function SlideContainer({ children, slideKey, direction }: SlideContainerProps) {
  return (
    <AnimatePresence mode="wait" custom={direction}>
      <motion.div
        key={slideKey}
        custom={direction}
        variants={variants}
        initial="enter"
        animate="center"
        exit="exit"
        transition={{
          x: { type: 'spring', stiffness: 300, damping: 30 },
          opacity: { duration: 0.3 },
          scale: { duration: 0.3 },
        }}
        className="absolute inset-0 flex justify-center overflow-y-auto"
      >
        <div className="w-full max-w-6xl mx-auto px-6 py-12 md:py-16 my-auto">
          {children}
        </div>
      </motion.div>
    </AnimatePresence>
  )
}