const InputScreen = ({ value, onChange, onAnalyze }) => {
    const isEmpty = !value || value.trim() === '';
    const [mounted, setMounted] = React.useState(false);

    React.useEffect(() => {
        const id = requestAnimationFrame(() => setMounted(true));
        return () => cancelAnimationFrame(id);
    }, []);

    return (
        <section className={"input-screen " + (mounted ? 'enter' : '')}>
            <div className="input-label">NotJS Analyzer v1.0.0</div>
            <textarea
                className="editor"
                placeholder="// Paste your code here..."
                value={value}
                onChange={onChange}
                rows={12}
            />

            <div className="controls">
                <button
                    className={"analyze-btn " + (isEmpty ? 'disabled' : 'active')}
                    onClick={() => { if (!isEmpty) onAnalyze(); }}
                    disabled={isEmpty}
                >
                    Analyze
                </button>
            </div>
        </section>
    );
}