import { Flex, Typography, Tag, Space } from 'antd'
import PropTypes from 'prop-types'

const { Text } = Typography

const NetGrossDisplay = ({ value, prefix = '', suffix = '' }) => {
  const net = parseFloat(value?.net)
  const gross = parseFloat(value?.gross)

  return (
    <Flex gap={'middle'} align='center' style={{ height: '100%' }}>
      <Flex wrap>
        <Text style={{ marginRight: 4 }}>
          {net != null && net !== '' ? (
            prefix + net.toFixed(2).toString() + suffix
          ) : (
            <Text type='secondary'>n/a</Text>
          )}
        </Text>
        <Space>
          <Tag>Net</Tag>
        </Space>
      </Flex>
      <Flex wrap>
        <Text style={{ marginRight: 4 }}>
          {gross != null && gross !== '' ? (
            prefix + gross.toFixed(2).toString() + suffix
          ) : (
            <Text type='secondary'>n/a</Text>
          )}
        </Text>
        <Space>
          <Tag>Gross</Tag>
        </Space>
      </Flex>
    </Flex>
  )
}

NetGrossDisplay.propTypes = {
  value: PropTypes.shape({
    net: PropTypes.number,
    gross: PropTypes.number
  }),
  prefix: PropTypes.string,
  suffix: PropTypes.string
}

export default NetGrossDisplay