import React from "react";
import { motion } from "framer-motion";
import type { MotionProps } from "framer-motion";

interface MotionWrapperProps extends Omit<MotionProps, 'custom'> {
  children: React.ReactNode;
  delay?: number;
  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
  duration?: number;
}

export default function MotionWrapper({
  children,
  delay = 0,
  direction = 'up',
  duration = 0.6,
  ...props
}: MotionWrapperProps) {
  const directions = {
    up: { y: 30, x: 0 },
    down: { y: -30, x: 0 },
    left: { x: 30, y: 0 },
    right: { x: -30, y: 0 },
    none: { x: 0, y: 0 }
  };

  const initial = {
    opacity: 0,
    ...directions[direction]
  };

  const whileInView = {
    opacity: 1,
    x: 0,
    y: 0,
    transition: {
      duration,
      delay,
      ease: [0.43, 0.13, 0.23, 0.96]
    }
  };

  return (
    <motion.div
      initial={initial}
      whileInView={whileInView}
      viewport={{ once: true, margin: "-100px" }}
      {...props}
    >
      {children}
    </motion.div>
  );
}
