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

class WalletManagementLayout extends ConsumerWidget {
  final List<Widget> children;
  final Widget footer;
  final Kid kid;

  const WalletManagementLayout({
    super.key,
    required this.kid,
    required this.children,
    required this.footer,
  });

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

    final content = [
      Container(
        padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
        child: Stack(
          children: [
            IconButton(
              onPressed: () => Navigator.pop(context),
              icon: Icon(
                Icons.arrow_back_ios_outlined,
                color: theme.getColorFor(ThemeCode.textSecondary),
              ),
            ),
            Expanded(
              child: Center(
                child: Column(
                  children: [
                    Text(
                      kid.name,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 30,
                        color: theme.getColorFor(ThemeCode.textSecondary),
                      ),
                    ),
                    Text.rich(
                      TextSpan(
                        text: "Saldo disponible: ",
                        style: TextStyle(
                          color: theme.getColorFor(ThemeCode.textSecondary),
                        ),
                        children: [
                          TextSpan(
                            text: "${kid.balance}",
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              color: theme.getColorFor(ThemeCode.textSecondary),
                            ),
                          ),
                          TextSpan(
                            text: "€",
                            style: TextStyle(
                              color: theme.getColorFor(ThemeCode.textSecondary),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      ...children,
    ];

    return Scaffold(
      backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(30)),
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: theme.getCardColorFor(0),
              ),
            ),
            child: SizedBox(width: double.infinity, height: 200),
          ),
          Column(
            children: [
              Expanded(
                child: ListView.separated(
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      margin: EdgeInsets.symmetric(horizontal: 20),
                      child: content[index],
                    );
                  },
                  separatorBuilder: (BuildContext context, int index) {
                    return Divider(height: 30, color: Colors.transparent);
                  },
                  itemCount: content.length,
                ),
              ),
              footer,
            ],
          ),
        ],
      ),
    );
  }
}