import 'package:flutter/material.dart';
import 'package:el_impostor/l10n/generated/app_localizations.dart';
import '../tema/tema_app.dart';

class PantallaUnirse extends StatelessWidget {
  const PantallaUnirse({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;

    return Scaffold(
      appBar: AppBar(title: Text(l10n.joinGameTitle)),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(32),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('📱', style: TextStyle(fontSize: 64)),
              const SizedBox(height: 24),
              Text(
                l10n.multiDeviceMode,
                style: Theme.of(context).textTheme.headlineMedium,
              ),
              const SizedBox(height: 16),
              Text(
                l10n.scanQrDescription,
                style: Theme.of(context).textTheme.bodyLarge,
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 32),
              Container(
                width: double.infinity,
                padding: const EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: TemaApp.colorNaranja.withValues(alpha: 0.15),
                  borderRadius: BorderRadius.circular(16),
                  border: Border.all(color: TemaApp.colorNaranja.withValues(alpha: 0.5)),
                ),
                child: Column(
                  children: [
                    const Text('🚧', style: TextStyle(fontSize: 32)),
                    const SizedBox(height: 8),
                    Text(
                      l10n.comingSoon,
                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
                        color: TemaApp.colorNaranja,
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      l10n.nearbyNotAvailable,
                      style: Theme.of(context).textTheme.bodyMedium,
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 32),
              SizedBox(
                width: double.infinity,
                child: OutlinedButton.icon(
                  onPressed: () => Navigator.pop(context),
                  icon: const Icon(Icons.arrow_back),
                  label: Text(l10n.back),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}