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

class WelcomeScreen extends ConsumerWidget {
  final NavigationContract navigationContract;

  const WelcomeScreen({super.key, required this.navigationContract});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Spacer(),
            Expanded(
              child: CarouselView(
                scrollDirection: Axis.horizontal,
                itemExtent: double.infinity,
                itemSnapping: true,
                shrinkExtent: 400,
                children: generateSteps(),
              ),
            ),
            FilledButton(
              onPressed: () => navigationContract.goTo(AppRoutes.linkPhone),
              child: const Text('Continuar'),
            ),
            Spacer(),
          ],
        ),
      ),
    );
  }

  void jumpToNext(BuildContext context) {
    // Navigator.pushReplacement(
    //   context,
    //   MaterialPageRoute(builder: (_) => LinkPhoneScreen()),
    // );
    return;
  }

  List<Widget> generateSteps() {
    return [
      Column(
        spacing: 48,
        children: [
          SvgPicture.asset("assets/images/ui/bienvenida_paso1.svg"),
          Column(
            spacing: 16,
            children: [
              const Text(
                "Aprende a gestionar su dinero",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0)
              ),
              const Text(
                "Tu peque crea hábitos y se divierte mientras lo hace",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 18, letterSpacing: 0)
              )
            ]
          )
        ]
      ),
      Column(
        spacing: 48,
        children: [
          SvgPicture.asset("assets/images/ui/bienvenida_paso2.svg"),
          Column(
            spacing: 16,
            children: [
              const Text(
                "Tranquilidad en cada pago que hace",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0)
              ),
              const Text(
                "Supervisa sus gastos, fija límites y acompáñale en cada paso",
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 18, letterSpacing: 0)
              ),
            ],
          )
        ],
      ),
      Column(
        spacing: 48,
        children: [
          SvgPicture.asset("assets/images/ui/bienvenida_paso3.svg"),
          Column(
            spacing: 16,
            children: [
              const Text(
                  "Pagos fáciles y seguros, en sus manos",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0)
              ),
              const Text(
                  "Podrá pagar desde su reloj.\n Sin móvil ni efectivo",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 18, letterSpacing: 0)
              ),
            ],
          )
        ],
      ),
    ];
  }
}