import React, { useMemo } from "react";
import PropTypes from "prop-types";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

const getStyles = theme => ({
  panel: {
    display: "flex"
  },
  label: {
    marginRight: "4px"
  },
  data: {
    fontWeight: theme.typography.fontWeightMedium
  }
});

const DataLabel = ({ label, data }) => {
  const theme = useTheme();
  const lbl = useMemo(() => (label.endsWith(":") ? label : `${label}:`), [label]);
  const styles = getStyles(theme);

  return (
    <div style={styles.panel}>
      <Typography variant="body2" sx={styles.label}>
        {lbl}
      </Typography>
      <Typography variant="body2" sx={styles.data}>
        {data}
      </Typography>
    </div>
  );
};

DataLabel.propTypes = {
  label: PropTypes.string.isRequired,
  data: PropTypes.string
};

export default DataLabel;
