import React from 'react';
import {
  ArrowDownLeft,
  ArrowUpRight,
  CheckCircle,
  Clock,
  CreditCard,
  DollarSign,
  TrendingUp,
  XCircle
} from 'lucide-react';

interface Transaction {
  id: string;
  amount: number;
  type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize';
  status: 'completed' | 'pending' | 'failed';
  description: string;
  reference?: string;
  formattedDate: string;
  formattedAmount: string;
  fee: number;
}

interface TransactionRowProps {
  transaction: Transaction;
}

export default function TransactionRow({ transaction }: TransactionRowProps) {
  const isIncoming = transaction.amount > 0;

  const typeIcons = {
    sponsorship: DollarSign,
    membership: CreditCard,
    withdrawal: ArrowUpRight,
    prize: TrendingUp,
  };
  const TypeIcon = typeIcons[transaction.type];

  const statusConfig = {
    completed: { color: 'text-performance-green', bg: 'bg-performance-green/10', icon: CheckCircle },
    pending: { color: 'text-warning-amber', bg: 'bg-warning-amber/10', icon: Clock },
    failed: { color: 'text-racing-red', bg: 'bg-racing-red/10', icon: XCircle },
  };
  const status = statusConfig[transaction.status];
  const StatusIcon = status.icon;

  return (
    <div className="flex items-center justify-between p-4 border-b border-charcoal-outline last:border-b-0 hover:bg-iron-gray/30 transition-colors">
      <div className="flex items-center gap-4">
        <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${isIncoming ? 'bg-performance-green/10' : 'bg-iron-gray/50'}`}>
          {isIncoming ? (
            <ArrowDownLeft className="w-5 h-5 text-performance-green" />
          ) : (
            <ArrowUpRight className="w-5 h-5 text-gray-400" />
          )}
        </div>
        <div>
          <div className="flex items-center gap-2">
            <span className="font-medium text-white">{transaction.description}</span>
            <span className={`px-2 py-0.5 rounded text-xs ${status.bg} ${status.color}`}>
              {transaction.status}
            </span>
          </div>
          <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
            <TypeIcon className="w-3 h-3" />
            <span className="capitalize">{transaction.type}</span>
            {transaction.reference && (
              <>
                <span>•</span>
                <span>{transaction.reference}</span>
              </>
            )}
            <span>•</span>
            <span>{transaction.formattedDate}</span>
          </div>
        </div>
      </div>
      <div className="text-right">
        <div className={`font-semibold ${isIncoming ? 'text-performance-green' : 'text-white'}`}>
          {transaction.formattedAmount}
        </div>
        {transaction.fee > 0 && (
          <div className="text-xs text-gray-500">
            Fee: ${transaction.fee.toFixed(2)}
          </div>
        )}
      </div>
    </div>
  );
}