import 'package:flutter/material.dart';

import '../../../tema/pluriwave_theme.dart';
import '../../../widgets/pluri_glass_surface.dart';

/// Design ADR-3: the two nav-row primitives every Settings detail screen is
/// reached through. [GrupoAjustes] is a single [PluriGlassSurface] card
/// carrying a [PluriWaveTypography.eyebrowLabel] group heading and a list of
/// [FilaAjuste] rows, each pushing its detail screen via
/// `PluriPushScaffold.push`. Neither primitive owns any business logic or
/// provider read — they are pure navigation chrome, which is what keeps the
/// Settings root down to "grouped nav rows only".
class GrupoAjustes extends StatelessWidget {
  const GrupoAjustes({super.key, required this.titulo, required this.filas});

  /// Group heading, styled with [PluriWaveTypography.eyebrowLabel]. Authored
  /// already in its display form — this style never applies `toUpperCase()`.
  final String titulo;

  final List<FilaAjuste> filas;

  @override
  Widget build(BuildContext context) {
    final type = context.pluriType;
    return PluriGlassSurface(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(titulo, style: type.eyebrowLabel),
          const SizedBox(height: 4),
          for (var i = 0; i < filas.length; i++) ...[
            if (i > 0) const Divider(height: 1),
            filas[i],
          ],
        ],
      ),
    );
  }
}

/// A single Settings navigation row: icon, title, and a trailing chevron.
/// Tapping it is the row's only behaviour — it carries no switches, sliders
/// or text fields, which is what "zero inline controls" means at the root.
class FilaAjuste extends StatelessWidget {
  const FilaAjuste({
    super.key,
    required this.icon,
    required this.titulo,
    required this.onTap,
  });

  final IconData icon;
  final String titulo;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final type = context.pluriType;
    return ListTile(
      contentPadding: EdgeInsets.zero,
      leading: Icon(icon),
      title: Text(titulo, style: type.cardTitle),
      trailing: const Icon(Icons.chevron_right_rounded),
      onTap: onTap,
    );
  }
}