import { Typography, TypographyProps } from '@tidbcloud/uikit'
import { MONOSPANCED_FONT_FAMILY } from '@tidbcloud/uikit/theme'
import React from 'react'

import { toFloorPriceStr } from './utils'

export const MoneyValue: React.FC<
  React.PropsWithChildren<
    {
      amount: number | string
      negativeZero?: boolean
    } & TypographyProps
  >
> = ({ amount, negativeZero, ...rest }) => {
  const num = Number(amount)

  if (amount === null || amount === '' || isNaN(num))
    return (
      <Typography className="value" {...rest}>
        -
      </Typography>
    )

  return (
    <Typography ff={MONOSPANCED_FONT_FAMILY} display="inline-block" {...rest}>
      {toFloorPriceStr(amount, negativeZero)}
    </Typography>
  )
}