import { cn } from '@/lib/utils';
import { formatPrice } from '@/lib/utils';
import { formatDate } from '@/lib/intl-date';

interface WalletTransactionCardProps {
  type: 'credit' | 'debit';
  amount_minor: number;
  currency?: string;
  description: string;
  date: string;
  status?: 'pending' | 'settled';
  locale?: string;
  pendingLabel?: string;
  className?: string;
}

export function WalletTransactionCard({
  type,
  amount_minor,
  currency = 'EGP',
  description,
  date,
  status = 'settled',
  locale = 'en',
  pendingLabel,
  className,
}: WalletTransactionCardProps) {
  const isCredit = type === 'credit';

  return (
    <div className={cn('flex items-center justify-between py-3 border-b border-neutral-100 last:border-0', className)}>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-neutral-900 truncate">{description}</p>
        <p className="text-xs text-neutral-400 mt-0.5">
          {formatDate(date, locale, { dateStyle: 'medium' })}
          {status === 'pending' && pendingLabel && (
            <span className="ms-2 rounded-full bg-warning/15 px-1.5 py-0.5 text-[10px] font-medium text-warning">
              {pendingLabel}
            </span>
          )}
        </p>
      </div>
      <p className={cn('ms-3 tabular-nums text-sm font-semibold flex-shrink-0', isCredit ? 'text-success' : 'text-neutral-700')}>
        {isCredit ? '+' : '−'}
        {formatPrice(amount_minor, locale, currency)}
      </p>
    </div>
  );
}