interface Props {
  value?: number | string | null;
  /** 양음 부호 표시 (true: +1,234 / -1,234) */
  showSign?: boolean;
  /** 소수점 자리 (default 0) */
  fraction?: number;
}

/**
 * 09_UI_DESIGN.md §5 MoneyText — 양수 #0F6E56(초록), 음수 #E24B4A(빨강), 0 #888(회색).
 * 천 단위 콤마, tabular-nums 적용.
 */
export default function MoneyText({ value, showSign, fraction = 0 }: Props) {
  if (value === null || value === undefined || value === '') return <span>-</span>;
  const n = typeof value === 'string' ? Number(value) : value;
  if (Number.isNaN(n)) return <span>-</span>;

  const formatted = n.toLocaleString(undefined, {
    minimumFractionDigits: fraction,
    maximumFractionDigits: fraction,
  });

  let color: string;
  if (n > 0) color = 'var(--ga-money-plus)';
  else if (n < 0) color = 'var(--ga-money-minus)';
  else color = 'var(--ga-money-zero)';

  const sign = n < 0 ? '' : showSign && n > 0 ? '+' : '';

  return (
    <span style={{ color, fontVariantNumeric: 'tabular-nums' }}>
      {sign}{formatted}
    </span>
  );
}
