import React, { useMemo } from 'react';
import './index.less';
function LabelValue({ label, value, emptyValue, labelColor, valueColor, className, fontSize, noWrap, valueFontWeight, valueFontSize, noColon }) {
  const defaultValueColor = useMemo(() => (!!value ? valueColor : 'var(--text-light)'), [value, valueColor]);
  return (
    <div className={`lm-c-label-value-layout ${className}`} style={{ fontSize }}>
      <span style={{ color: labelColor }}>
        {label}
        {noColon ? '' : '：'}
      </span>
      <span
        title={typeof value === 'string' || typeof value === 'number' ? value : null}
        className={`${noWrap ? 'no-wrap' : ''}`}
        style={{ color: defaultValueColor, fontWeight: valueFontWeight, fontSize: valueFontSize }}
      >
        {value || emptyValue || '-'}
      </span>
    </div>
  );
}

LabelValue.defaultProps = {
  value: '',
  labelColor: 'var(--color)',
  emptyValue: '-',
  valueColor: 'var(--color-dark)',
  fontSize: 'var(--fs-small)',
  valueFontSize: 'var(--fs-small)',
  noWrap: false,
  className: '',
  valueFontWeight: 'normal',
};

export default React.memo(LabelValue);
