import 'package:flutter/material.dart';
import '../../../shared/design_system/tokens/app_colors.dart';
import '../../../shared/design_system/tokens/app_typography.dart';

/// UnionFlow Mobile - Composant DRY : MiniMetricWidget
/// Affiche une métrique sous forme "Label (10px) / Valeur (13px)".
/// Utilisé dans le Dashboard financier compressé.
class MiniMetricWidget extends StatelessWidget {
  final String label;
  final String value;
  final Color? valueColor;
  final CrossAxisAlignment alignment;

  const MiniMetricWidget({
    Key? key,
    required this.label,
    required this.value,
    this.valueColor,
    this.alignment = CrossAxisAlignment.start,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: alignment,
      children: [
        Text(
          label.toUpperCase(),
          style: AppTypography.badgeText.copyWith(
            color: Theme.of(context).brightness == Brightness.dark 
                ? AppColors.textSecondaryDark 
                : AppColors.textSecondary,
          ),
        ),
        const SizedBox(height: 2),
        Text(
          value,
          style: AppTypography.actionText.copyWith(
            color: valueColor ?? (Theme.of(context).brightness == Brightness.dark 
                ? AppColors.textPrimaryDark 
                : AppColors.textPrimary),
          ),
        ),
      ],
    );
  }
}