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, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
};

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

const AnimationWrapper: React.FC<AnimationWrapperProps> = ({
    children,
    isChild = false,
    className = "",
    staggerChildren = 0.5,
}) => {
    return !isChild ? (
        <motion.section
            variants={sectionVariants(staggerChildren)}
            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 AnimationWrapper;