import React from 'react';

interface SparkTextProps {
    text: string;
}

const sparkTextStyle: React.CSSProperties = {
    textShadow: '0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 255, 255, 0.5)',
    animation: 'sparkle 1s infinite'
};

const SparkText: React.FC<SparkTextProps> = ({ text }) => {
    return (
        <>
            <style>
                {`
                    @keyframes sparkle {
                        0%, 100% {
                            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(163, 13, 13, 0.5);
                        }
                        50% {
                            text-shadow: 0 0 10px rgb(214, 44, 44), 0 0 20px rgb(139, 198, 31), 0 0 30px rgb(41, 195, 82);
                        }
                    }
                `}
            </style>
            <span style={sparkTextStyle}>{text}</span>
        </>
    );
};

export default SparkText;