// src/components/icons/TransactionIcon.tsx
import { cn } from '@/lib/utils.client';
import { BanknoteArrowDown, BanknoteArrowUp, BatteryCharging, MapPinned, FileText, HelpCircle, Ticket } from 'lucide-react';

interface TransactionIconProps {
  type: string;
  className?: string;
}

export const TransactionIcon: React.FC<TransactionIconProps> = ({ type, className }) => {
  const getColorClass = (transactionType: string) => {
    if (transactionType === 'TOPUP' || transactionType === 'FREE_CREDIT')
      return 'text-green-500';
    if (transactionType === 'WITHDRAWAL')
      return 'text-yellow-500';
    if (transactionType === 'CHARGE')
      return 'text-red-500';
    return 'text-gray-500';
  };

  const baseColorClass = getColorClass(type);
  const iconClasses = cn(className || 'w-6 h-6', baseColorClass);

  switch (type) {
    case 'TOPUP':
      return <BanknoteArrowDown className={iconClasses} />;
    case 'WITHDRAWAL':
      return <BanknoteArrowUp className={iconClasses} />;
    case 'CHARGE':
      return <BatteryCharging className={iconClasses} />;
    case 'RESERVATION':
      return <MapPinned className={iconClasses} />;
    case 'FREE_CREDIT':
      return <Ticket className={iconClasses} />;
    default:
      return <HelpCircle className={iconClasses} />;
  }
};