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;