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

/// Header for the billing page showing current period total and savings.
class BillingHeader extends StatelessWidget {
  /// Creates a [BillingHeader].
  const BillingHeader({
    required this.currentBill,
    required this.savings,
    required this.onBack,
    super.key,
  });

  /// The amount of the current bill.
  final double currentBill;

  /// The amount saved in the current period.
  final double savings;

  /// Callback when the back button is pressed.
  final VoidCallback onBack;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(
        UiConstants.space5,
        MediaQuery.of(context).padding.top + UiConstants.space4,
        UiConstants.space5,
        UiConstants.space5,
      ),
      color: UiColors.primary,
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              UiIconButton.secondary(icon: UiIcons.arrowLeft, onTap: onBack),
              const SizedBox(width: UiConstants.space3),
              Text(
                t.client_billing.title,
                style: UiTypography.headline4m.copyWith(color: UiColors.white),
              ),
            ],
          ),
          const SizedBox(height: UiConstants.space5),
          Column(
            children: <Widget>[
              Text(
                t.client_billing.current_period,
                style: UiTypography.footnote2r.copyWith(
                  color: UiColors.white.withValues(alpha: 0.7),
                ),
              ),
              const SizedBox(height: UiConstants.space1),
              Text(
                '\$${currentBill.toStringAsFixed(2)}',
                style: UiTypography.display1b.copyWith(color: UiColors.white),
              ),

              const SizedBox(height: UiConstants.space2),
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: UiConstants.space2,
                  vertical: UiConstants.space1,
                ),
                decoration: BoxDecoration(
                  color: UiColors.accent,
                  borderRadius: BorderRadius.circular(100),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const Icon(
                      UiIcons.trendingDown,
                      size: 12,
                      color: UiColors.foreground,
                    ),
                    const SizedBox(width: UiConstants.space1),
                    Text(
                      t.client_billing.saved_amount(
                        amount: savings.toStringAsFixed(0),
                      ),
                      style: UiTypography.footnote2b.copyWith(
                        color: UiColors.foreground,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
