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

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

    return Column(
      spacing: 10,
      children: [
        SvgPicture.asset("assets/images/ui/formulario.svg"),
        Row(
          spacing: 16,
          children: [
            Container(
              decoration: ShapeDecoration(
                shape: CircleBorder(side: BorderSide(color: theme.getColorFor(ThemeCode.backgroundSecondary))),
                color: theme.getColorFor(ThemeCode.backgroundSecondary)
              ),
              width: 48,
              height: 48,
              child: Center(child: Text("1", style: TextStyle(fontSize: 24))),
            ),
            Column(
              children: [
                Text("Escanea la correa", textAlign: TextAlign.left, style: TextStyle(fontSize: 24)),
                Text("El peque podrá realizar pagos"),
              ],
            ),
          ],
        ),
        Row(
          spacing: 16,
          children: [
            Container(
              decoration: ShapeDecoration(
                shape: CircleBorder(side: BorderSide(color: theme.getColorFor(ThemeCode.backgroundSecondary))),
                color: theme.getColorFor(ThemeCode.backgroundSecondary)
              ),
              width: 48,
              height: 48,
              child: Center(child: Text("2", style: TextStyle(fontSize: 24))),
            ),
            Column(
              children: [
                Text("Escanea el reloj", textAlign: TextAlign.left, style: TextStyle(fontSize: 24)),
                Text("Visualizarás los gastos que se hagan"),
              ]
            )
          ],
        ),
      ],
    );
  }
}