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;
}

export default function MotionWrapper({
  children,
  delay = 0,
  ...props
}: MotionWrapperProps) {
  return (
    <motion.div
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, margin: "-100px" }}
      variants={{
        hidden: { opacity: 0, y: 20 },
        visible: {
          opacity: 1,
          y: 0,
          transition: {
            duration: 0.6,
            delay,
            ease: [0.43, 0.13, 0.23, 0.96]
          }
        }
      }}
      custom={delay}
      {...props}
    >
      {children}
    </motion.div>
  );
}