"use client";
import { motion } from "framer-motion";
import React, { ReactNode } from "react";

interface AnimationWrapper3Props {
  children: ReactNode;
  className?: string;
  initial?: "hidden" | "visible";
  animate?: "hidden" | "visible";
  viewport?: { once?: boolean; amount?: number };
}

export const sectionVariants = {
  hidden: { opacity: 0, y: -50, scale:1.1 },
  visible: {
    opacity: 1,
    scale:1,
    y: 0,
    transition: {
      duration: 0.8,
      delay:0.2,
      staggerChildren: 0.1,
    },
  },
};
export const childVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: { opacity: 1, y: 0 },
  };
const AnimationWrapper3: React.FC<AnimationWrapper3Props> = ({
  children,
  className = "",
  initial = "hidden",
  animate = "visible",
  viewport = { once: true, margin: "0% 0px -30% 0px" },

}) => {
  return (
    <motion.div
      variants={sectionVariants}
      initial={initial}
      whileInView={animate}
      viewport={viewport}
      className={className}
    >
      {children}
    </motion.div>
  );
};

export default AnimationWrapper3;