import { Typography } from "antd";

export default function DataLabel({
  label,
  hideIfNull,
  children,
  open = true,
  valueStyle = {},
  valueClassName,
  onValueClick,
  ...props
}) {
  if (!open || (hideIfNull && !children)) return null;

  return (
    <div {...props} style={{ display: "flex" }}>
      <div
        style={{
          // flex: 2,
          marginRight: ".2rem"
        }}
      >
        <Typography.Text type="secondary">{`${label}:`}</Typography.Text>
      </div>
      <div
        style={{
          flex: 4,
          marginLeft: ".3rem",
          fontWeight: "bolder",
          wordWrap: "break-word",
          cursor: onValueClick !== undefined ? "pointer" : ""
        }}
        className={valueClassName}
        onClick={onValueClick}
      >
        {typeof children === "string" ? <Typography.Text style={valueStyle}>{children}</Typography.Text> : children}
      </div>
    </div>
  );
}
