import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
import { Spinner } from '@/components/ui/spinner';

/**
 * Spinner animé pour les boutons de soumission, à utiliser à la place de
 * `{processing && <Spinner />}` pour une apparition/disparition en douceur.
 */
export default function SubmitSpinner({ show }: { show: boolean }) {
    const shouldReduceMotion = useReducedMotion();

    return (
        <AnimatePresence>
            {show && (
                <motion.span
                    initial={
                        shouldReduceMotion
                            ? false
                            : { opacity: 0, scale: 0.8, width: 0 }
                    }
                    animate={{ opacity: 1, scale: 1, width: 'auto' }}
                    exit={
                        shouldReduceMotion
                            ? undefined
                            : { opacity: 0, scale: 0.8, width: 0 }
                    }
                    transition={{ duration: 0.2, ease: 'easeOut' }}
                    className="inline-flex overflow-hidden"
                >
                    <Spinner />
                </motion.span>
            )}
        </AnimatePresence>
    );
}