import React from 'react';
import type { TransactionType } from '@rent/shared-types';
import { TRANSACTION_TYPE_MAP } from '@rent/shared-types';
import { formatMoney } from '@rent/shared-utils';

interface TransactionAmountProps {
  type: TransactionType;
  amount: number;
}

/**
 * 交易金额组件（带正负号和颜色）
 */
export const TransactionAmount: React.FC<TransactionAmountProps> = ({ type, amount }) => {
  const config = TRANSACTION_TYPE_MAP[type];

  if (!config) {
    return <span>{formatMoney(amount)}</span>;
  }

  const color = config.sign === '+' ? '#52c41a' : '#ff4d4f';
  const displayAmount = config.sign === '+' ? `+${formatMoney(amount, '')}` : `-${formatMoney(amount, '')}`;

  return <span style={{ color, fontWeight: 500 }}>{displayAmount}</span>;
};
