import { Typography } from 'antd'
import PropTypes from 'prop-types'

const { Text } = Typography

const VarianceDisplay = ({ value, prefix, suffix }) => {
  if (value === null || value === undefined) {
    return <Text type='secondary'>n/a</Text>
  }

  const isPositive = value > 0
  const isNegative = value < 0
  const displayValue = Math.abs(value).toFixed(2)

  return (
    <Text type={isPositive ? 'success' : isNegative ? 'danger' : undefined}>
      {prefix || ''}
      {isPositive ? '+' : isNegative ? '-' : ''}
      {displayValue}
      {suffix || ''}
    </Text>
  )
}

VarianceDisplay.propTypes = {
  value: PropTypes.number,
  prefix: PropTypes.string,
  suffix: PropTypes.string
}

export default VarianceDisplay