import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
import { cn } from '@/lib/utils';

export default function InputError({
    message,
    className = '',
}: {
    message?: string;
    className?: string;
}) {
    const shouldReduceMotion = useReducedMotion();

    return (
        <AnimatePresence>
            {message && (
                <motion.p
                    initial={shouldReduceMotion ? false : { opacity: 0, y: -4 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={shouldReduceMotion ? undefined : { opacity: 0 }}
                    transition={{ duration: 0.2, ease: 'easeOut' }}
                    className={cn(
                        'text-sm text-red-600 dark:text-red-400',
                        className,
                    )}
                >
                    {message}
                </motion.p>
            )}
        </AnimatePresence>
    );
}