function Auth({ authMode, setAuthMode, loginData, setLoginData, handleAuth, authLoading, authError, t, Icons }) {
    return (
        <div className={`w-full max-w-md glass-card p-10 rounded-[2.5rem] shadow-2xl flex flex-col items-center transition-all animate-in fade-in duration-700 ${authError ? 'error-shake' : ''}`}>
            <div className="w-20 h-20 bg-indigo-600 text-white rounded-2xl flex items-center justify-center mb-8 shadow-2xl">
                <Icons.User size={40} />
            </div>
            <h2 className="text-3xl font-black mb-2 text-center text-white">{authMode === 'login' ? t.login : t.register}</h2>
            <p className="text-slate-400 mb-8 text-center text-sm">{t.subtitle}</p>

            <form onSubmit={handleAuth} className="w-full space-y-4">
                {authError && <div className="p-3 bg-rose-500/10 border border-rose-500/20 rounded-xl text-rose-500 text-xs font-bold text-center">{authError}</div>}
                <div className="space-y-1.5">
                    <label className="text-xs font-black text-slate-500 uppercase px-1">{t.username}</label>
                    <input
                        type="text"
                        value={loginData.username}
                        onChange={(e) => setLoginData({ ...loginData, username: e.target.value })}
                        className="w-full bg-slate-950/50 border border-slate-800 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all"
                        required
                    />
                </div>
                <div className="space-y-1.5">
                    <label className="text-xs font-black text-slate-500 uppercase px-1">{t.password}</label>
                    <input
                        type="password"
                        value={loginData.password}
                        onChange={(e) => setLoginData({ ...loginData, password: e.target.value })}
                        className="w-full bg-slate-950/50 border border-slate-800 rounded-xl px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition-all"
                        required
                    />
                </div>
                <button
                    type="submit"
                    disabled={authLoading}
                    className="w-full py-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-black shadow-lg transition-all active:scale-95 disabled:opacity-50"
                >
                    {authLoading ? '...' : (authMode === 'login' ? t.login : t.register)}
                </button>
            </form>
            <button
                onClick={() => setAuthMode(authMode === 'login' ? 'register' : 'login')}
                className="mt-6 text-sm font-bold text-indigo-400 hover:text-indigo-300 transition-colors"
            >
                {authMode === 'login' ? t.noAccount : t.hasAccount}
            </button>
        </div>
    );
}

window.Auth = Auth;