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

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

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

    return Scaffold(
      appBar: AppBar(title: Text(l10n.rulesTitle)),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _seccion(context, l10n.rulesWhatIsTitle, l10n.rulesWhatIsBody),
            _seccion(context, l10n.rulesHowToPlayTitle, l10n.rulesHowToPlayBody),
            _seccion(context, l10n.rulesWhoWinsTitle, l10n.rulesWhoWinsBody),
            _seccion(context, l10n.rulesTipsPlayersTitle, l10n.rulesTipsPlayersBody),
            _seccion(context, l10n.rulesTipsImpostorTitle, l10n.rulesTipsImpostorBody),
            _seccion(context, l10n.rulesModesTitle, l10n.rulesModesBody),
            _ejemplo(context, l10n.rulesExampleTitle, l10n.rulesExampleBody),
            const SizedBox(height: 32),
          ],
        ),
      ),
    );
  }

  Widget _seccion(BuildContext context, String titulo, String contenido) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(titulo,
                  style: Theme.of(context).textTheme.titleLarge),
              const SizedBox(height: 8),
              Text(contenido,
                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                    height: 1.5,
                  )),
            ],
          ),
        ),
      ),
    );
  }

  Widget _ejemplo(BuildContext context, String titulo, String contenido) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Card(
        color: TemaApp.colorNaranja.withValues(alpha: 0.15),
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(titulo,
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                    color: TemaApp.colorNaranja,
                  )),
              const SizedBox(height: 8),
              Text(contenido,
                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                    height: 1.5,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}