const SuccessScreen = ({ onReset }) => {
    const [mounted, setMounted] = React.useState(false);
    const full = '200 OK';
    const [typed, setTyped] = React.useState('');

    React.useEffect(() => {
        const raf = requestAnimationFrame(() => setMounted(true));
        let i = 0;
        const iv = setInterval(() => {
            i += 1;
            setTyped(full.slice(0, i));
            if (i >= full.length) clearInterval(iv);
        }, 60);
        return () => { cancelAnimationFrame(raf); clearInterval(iv); };
    }, []);

    return (
        <section className={"success-card " + (mounted ? 'enter' : '')}>
            <div className="success-200">{typed}</div>
            <div className="success-title">JavaScript Detected Successfully</div>
            <div className="success-sub">Excellent choice. Superior language.</div>

            <div style={{ marginTop: 16 }}>
                <button className="analyze-btn active" onClick={onReset}>Analyze Again</button>
            </div>
        </section>
    );
}