import PropTypes from 'prop-types'
import { Space, Tag } from 'antd'
import CheckIcon from '../../Icons/CheckIcon'
import XMarkIcon from '../../Icons/XMarkIcon'

const BoolDisplay = ({
  value,
  yesNo,
  showIcon = true,
  showText = true,
  showColor = true
}) => {
  var falseText = 'False'
  var trueText = 'True'
  if (yesNo) {
    falseText = 'No'
    trueText = 'Yes'
  }
  return (
    <Space>
      <Tag
        style={{ margin: 0 }}
        color={showColor ? (value ? 'success' : 'error') : 'default'}
        icon={showIcon ? value ? <CheckIcon /> : <XMarkIcon /> : undefined}
      >
        {showText ? (value === true ? trueText : falseText) : null}
      </Tag>
    </Space>
  )
}

BoolDisplay.propTypes = {
  value: PropTypes.bool.isRequired,
  yesNo: PropTypes.bool,
  showIcon: PropTypes.bool,
  showText: PropTypes.bool,
  showColor: PropTypes.bool
}

export default BoolDisplay