import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class AddKidScreen extends ConsumerWidget {
  final nextStep;

  const AddKidScreen({super.key, required this.nextStep});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themePortProvider);

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
      body: Container(
        margin: EdgeInsets.all(30),
        child: Column(
          spacing: 15,
          children: [
            Spacer(flex: 6),
            Text("Añade a tu peque", style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
            Text(
              "Controla su gasto a la vez que aprende hábitos financieros responsables",
              textAlign: TextAlign.center,
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 30, horizontal: 50),
              child: Row(
                spacing: 10,
                children: [
                  Stack(
                    children: [
                      Column(
                        spacing: 16,
                        children: List<Widget>.generate(3, (int index) =>
                          Container(
                            decoration: ShapeDecoration(
                              shape: CircleBorder(),
                              color: theme.getColorFor(ThemeCode.buttonPrimary)
                            ),
                            width: 32,
                            height: 32,
                            child: Center(child: Text(
                              (index + 1).toString(),
                              style: TextStyle(
                                color: theme.getColorFor(ThemeCode.backgroundPrimary)
                              )
                            ))
                          )
                        )
                      ),
                      Divider(color: Colors.red, thickness: 4,),
                    ],
                  ),
                  Column(
                    spacing: 16,
                    children: [
                      Text("Crea su perfil"),
                      Text("Vincula su correa y su reloj"),
                      Text("Carga su hucha"),
                    ],
                  ),
                ],
              ),
            ),
            Text(
              "¡Y todo listo para que tenga su dinero!",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                letterSpacing: 0
              )
            ),
            Text(
              "Recuerda que necesitas tener un Plan SaveFamily",
              textAlign: TextAlign.center
            ),
            Text(
              "Si aún no lo tienes, puedes conseguirlo a través de nuestra web",
              textAlign: TextAlign.center,
            ),
            Spacer(flex: 8),
            PrimaryButton(
              onPressed: nextStep,
              text: "¡Empezar!",
              color: theme.getColorFor(ThemeCode.buttonPrimary)
            ),
          ],
        ),
      ),
    );
  }
}
