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

/// Card showing savings information and rate optimization suggestions.
class SavingsCard extends StatelessWidget {
  /// Creates a [SavingsCard].
  const SavingsCard({required this.savings, super.key});

  /// The estimated savings amount.
  final double savings;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(UiConstants.space3),
      decoration: BoxDecoration(
        color: UiColors.accent.withValues(alpha: 0.2),
        borderRadius: UiConstants.radiusLg,
        border: Border.all(color: UiColors.accent),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(UiConstants.space2),
            decoration: BoxDecoration(
              color: UiColors.accent,
              borderRadius: UiConstants.radiusMd,
            ),
            child: const Icon(
              UiIcons.trendingDown,
              size: 16,
              color: UiColors.textPrimary,
            ),
          ),
          const SizedBox(width: UiConstants.space3),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  t.client_billing.rate_optimization_title,
                  style: UiTypography.body2b.textPrimary,
                ),
                const SizedBox(height: UiConstants.space1),
                Text(
                  // Using a hardcoded 180 here to match prototype mock or derived value
                  t.client_billing.rate_optimization_body(amount: 180),
                  style: UiTypography.footnote2r.textSecondary,
                ),
                const SizedBox(height: UiConstants.space2),
                SizedBox(
                  height: 28,
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ElevatedButton.styleFrom(
                      backgroundColor: UiColors.primary,
                      foregroundColor: UiColors.white,
                      elevation: 0,
                      padding: const EdgeInsets.symmetric(
                        horizontal: UiConstants.space3,
                      ),
                      shape: RoundedRectangleBorder(
                        borderRadius: UiConstants.radiusMd,
                      ),
                      textStyle: UiTypography.footnote2b,
                    ),
                    child: Text(t.client_billing.view_details),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
