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

export const sectionVariants = {
    hidden: { opacity: 0 },
    visible: {
        opacity: 1,
        transition: {
            duration: 1,
            staggerChildren: 0.5,
        },
    },
};

export const childVariants = {
    hidden: { opacity: 0,  },
    visible: { opacity: 1,  transition: { duration: 0.6 } },
};

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

const AnimationWrapper2: React.FC<AnimationWrapper2Props> = ({
    children,
    isChild = false,
    className = "",
}) => {
    return (
        !isChild ? (
            <motion.section
                variants={sectionVariants}
                initial={"hidden"}
                whileInView="visible"
                viewport={{ once: true, margin: "0% 0px -30% 0px" }}
                className={className}
            >
                {children}
            </motion.section>
        )
            :
            (
                <motion.div
                    variants={childVariants}
                    className={className}
                >
                    {children}

                </motion.div>
            )
    );
};

export default AnimationWrapper2;