import { Typography } from "antd";
import React from "react";

export default function DataLabel({
  label,
  hideIfNull,
  children,
  vertical,
  visible = true,
  valueStyle = {},
  valueClassName,
  onValueClick,
  ...props
}) {
  if (!visible || (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>
  );
}