import 'package:flutter/material.dart';
import '../tokens/unionflow_colors.dart';

/// Card de progression UnionFlow avec barre de progrès élégante
class UnionProgressCard extends StatelessWidget {
  final String title;
  final double progress; // 0.0 à 1.0
  final String subtitle;
  final Color? progressColor;
  final VoidCallback? onTap;

  const UnionProgressCard({
    super.key,
    required this.title,
    required this.progress,
    required this.subtitle,
    this.progressColor,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final effectiveColor = progressColor ?? UnionFlowColors.gold;

    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: UnionFlowColors.surface,
          borderRadius: BorderRadius.circular(16),
          boxShadow: UnionFlowColors.softShadow,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Title
            Text(
              title,
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: UnionFlowColors.textPrimary,
              ),
            ),
            const SizedBox(height: 12),

            // Progress bar
            Stack(
              children: [
                // Background track
                Container(
                  height: 14,
                  decoration: BoxDecoration(
                    color: UnionFlowColors.border,
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
                // Progress fill avec gradient
                FractionallySizedBox(
                  widthFactor: progress.clamp(0.0, 1.0),
                  child: Container(
                    height: 14,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [
                          effectiveColor,
                          effectiveColor.withOpacity(0.8),
                        ],
                      ),
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                          color: effectiveColor.withOpacity(0.3),
                          blurRadius: 8,
                          offset: const Offset(0, 2),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),

            const SizedBox(height: 8),

            // Subtitle
            Text(
              subtitle,
              style: const TextStyle(
                fontSize: 12,
                color: UnionFlowColors.textSecondary,
              ),
            ),
          ],
        ),
      ),
    );
  }
}