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

export const sectionVariants = (staggerChildren: number) => ({
    hidden: { opacity: 0 },
    visible: {
        opacity: 1,
        transition: {
            duration: 0.3,
            staggerChildren:staggerChildren,
        },
    },
});

export const childVariants = {
    hidden: { opacity: 0, y: -20,scale:0.9 },
    visible: { opacity: 1, scale:1, y: 0, transition: { type: "spring", 
        stiffness: 50, 
        damping: 8  } },
};

interface AnimationWrapper5Props {
    as?: keyof JSX.IntrinsicElements;
    children: React.ReactNode;
    isChild?: boolean;
    className?: string;
    staggerChildren?: number;
}

const AnimationWrapper5: React.FC<AnimationWrapper5Props> = ({
    children,
    isChild = false,
    className = "",
    staggerChildren = 0.05,
}) => {

    return !isChild ? (
        <motion.section
            variants={sectionVariants(staggerChildren)}
            initial={"hidden"}
            animate="visible"
            className={className}
        >
            {children}
        </motion.section>
    ) : (
        <motion.div  variants={childVariants} className={className}>
            {children}
        </motion.div>
    );
};

export default AnimationWrapper5;