import { Typography } from "antd";

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

  return (
    <div {...props} style={{ display: "flex", alignItems: "flex-start" }}>
      <div
        style={{
          marginRight: ".2rem",
          flexShrink: 0, // <-- key: don't let the label collapse
          whiteSpace: "nowrap" // <-- key: keep "Email:" on one line
        }}
      >
        <Typography.Text type="secondary">{`${label}:`}</Typography.Text>
      </div>

      <div
        style={{
          flex: 1, // <-- key: take remaining space
          minWidth: 0, // <-- key: allow this flex item to shrink
          marginLeft: ".3rem",
          fontWeight: "bolder",
          overflowWrap: "anywhere", // <-- key: break long tokens (email/vin)
          wordBreak: "break-word", // (backup behavior across browsers)
          cursor: onValueClick !== undefined ? "pointer" : "",
          ...(styles?.value ?? {}) // apply your per-field overrides to ALL children types
        }}
        className={valueClassName}
        onClick={onValueClick}
      >
        {typeof children === "string" ? <Typography.Text>{children}</Typography.Text> : children}
      </div>
    </div>
  );
}