unionflow-mobile-apps/lib/shared/design_system/components/union_transaction_tile.dart

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

/// Tuile de transaction UnionFlow
class UnionTransactionTile extends StatelessWidget {
  final String name;
  final String amount;
  final String status;
  final String? date;
  final VoidCallback? onTap;

  const UnionTransactionTile({
    super.key,
    required this.name,
    required this.amount,
    required this.status,
    this.date,
    this.onTap,
  });

  Color _getStatusColor() {
    switch (status.toLowerCase()) {
      case 'confirmé':
      case 'confirmed':
        return UnionFlowColors.success;
      case 'en attente':
      case 'pending':
        return UnionFlowColors.warning;
      case 'échoué':
      case 'failed':
        return UnionFlowColors.error;
      default:
        return UnionFlowColors.textSecondary;
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 12),
        decoration: const BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: UnionFlowColors.border,
              width: 1,
            ),
          ),
        ),
        child: Row(
          children: [
            // Avatar avec initiale
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                gradient: UnionFlowColors.primaryGradient,
                shape: BoxShape.circle,
              ),
              alignment: Alignment.center,
              child: Text(
                name.isNotEmpty ? name[0].toUpperCase() : '?',
                style: const TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                  fontSize: 16,
                ),
              ),
            ),
            const SizedBox(width: 12),

            // Nom et date
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    name,
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                      color: UnionFlowColors.textPrimary,
                    ),
                  ),
                  if (date != null) ...[
                    const SizedBox(height: 2),
                    Text(
                      date!,
                      style: const TextStyle(
                        fontSize: 11,
                        color: UnionFlowColors.textTertiary,
                      ),
                    ),
                  ],
                ],
              ),
            ),

            // Montant et status
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Text(
                  amount,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w700,
                    color: UnionFlowColors.unionGreen,
                  ),
                ),
                const SizedBox(height: 2),
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 8,
                    vertical: 2,
                  ),
                  decoration: BoxDecoration(
                    color: _getStatusColor().withOpacity(0.1),
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Text(
                    status,
                    style: TextStyle(
                      fontSize: 10,
                      fontWeight: FontWeight.w600,
                      color: _getStatusColor(),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

/// Liste de transactions dans une card
class UnionTransactionCard extends StatelessWidget {
  final String title;
  final List<UnionTransactionTile> transactions;
  final VoidCallback? onSeeAll;

  const UnionTransactionCard({
    super.key,
    required this.title,
    required this.transactions,
    this.onSeeAll,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: UnionFlowColors.surface,
        borderRadius: BorderRadius.circular(16),
        boxShadow: UnionFlowColors.softShadow,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Header
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  color: UnionFlowColors.textPrimary,
                ),
              ),
              if (onSeeAll != null)
                GestureDetector(
                  onTap: onSeeAll,
                  child: const Text(
                    'Voir tout',
                    style: TextStyle(
                      fontSize: 12,
                      fontWeight: FontWeight.w600,
                      color: UnionFlowColors.unionGreen,
                    ),
                  ),
                ),
            ],
          ),
          const SizedBox(height: 12),

          // Transactions
          ...transactions,
        ],
      ),
    );
  }
}