import { jsx } from 'react/jsx-runtime';
import { createContext, useMemo, useContext } from 'react';
import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { getGroupVariants } from './Animated.animations.js';
import { AnimatedItem } from './AnimatedItem.js';

const AnimatedContext = createContext(undefined);
const useAnimatedContext = () => {
    return useContext(AnimatedContext);
};
const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, className, ...props }) => {
    const shouldReduceMotion = useReducedMotion();
    if (shouldReduceMotion) {
        const Tag = as;
        return (jsx(Tag, { className: className, ...props, children: children }));
    }
    const groupVariants = useMemo(() => getGroupVariants(stagger, delay), [stagger, delay]);
    const MotionComponent = motion[as];
    const motionProps = {
        initial: 'hidden',
        animate: 'visible',
        exit: 'exit',
        variants: groupVariants,
        className: cn(className),
        ...props,
    };
    return (jsx(AnimatedContext.Provider, { value: { isInsideGroup: true, stagger, delay }, children: jsx(AnimatePresence, { children: jsx(MotionComponent, { ...motionProps, children: children }) }) }));
};
const Animated = Object.assign({}, {
    Group: AnimatedGroup,
    Item: AnimatedItem,
});

export { Animated, useAnimatedContext };
