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

class WalletBalanceBlock extends ConsumerWidget {
  final double max;
  final double value;
  final double savings;
  final double savingsPlan;

  const WalletBalanceBlock({
    super.key,
    required this.max,
    required this.value,
    required this.savings,
    this.savingsPlan = 30.0
  });

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

    return Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: theme.getColorFor(ThemeCode.backgroundPrimary),
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
      child: Column(
        spacing: 16,
        children: [
          Row(
            children: [
              Text(
                "Wallet",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              ),
              Spacer(),
              MoneyText(
                text: "$max€ total",
                size: 26,
                secondarySize: 16,
                color: theme.getColorFor(ThemeCode.textPrimary),
              ),
            ],
          ),
          Row(children: [
            Text("Objetivos de ahorro"),
            Spacer(),
            Text("$savingsPlan€")
          ]),
          ProgressBar(
            max: savingsPlan,
            value: savings,
            height: 24,
            textSize: 16,
            textSecondarySize: 12,
            backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
            foregroundColor: theme.getColorFor(ThemeCode.backgroundTertiary),
            textColor: theme.getColorFor(ThemeCode.textPrimary)
          ),
          ProgressBar(
            max: max,
            value: value,
            height: 83,
            textSize: 40,
            textSecondarySize: 24,
            backgroundColor: theme.getColorFor(ThemeCode.backgroundTertiary),
            foregroundColor: theme.getColorFor(ThemeCode.buttonPrimary),
            textColor: theme.getColorFor(ThemeCode.textSecondary)
          ),
          Center(child: Text("Disponible")),
        ],
      ),
    );
  }
}