src/components/lessons/SlideContainer.jsx

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

export default function SlideContainer({ children, slideKey }) {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={slideKey}
        initial={{ opacity: 0, x: 50 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: -50 }}
        transition={{ duration: 0.4, ease: "easeOut" }}
        className="min-h-screen pt-24 pb-32 px-6"
      >
        <div className="max-w-4xl mx-auto">
          {children}
        </div>
      </motion.div>
    </AnimatePresence>
  );
}