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

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

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

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

const AnimationWrapper6: React.FC<AnimationWrapper6Props> = ({
    children,
    isChild = false,
    className = "",
    staggerChildren = 0.2,
}) => {
    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 AnimationWrapper6;