import { motion } from 'framer-motion';

interface AnimatedTextProps {
    text: string;
    delayPerChar?: number;
    className?: string;
}

export default function AnimasiText({
    text,
    delayPerChar = 0.03,
    className = '',
}: AnimatedTextProps) {
    return (
        <span className={`inline-block ${className}`}>
            {text.split('').map((char, index) => (
                <motion.span
                    key={index}
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * delayPerChar }}
                    className="inline-block"
                >
                    {char === ' ' ? '\u00A0' : char} {/* render spasi */}
                </motion.span>
            ))}
        </span>
    );
}