import React from "react";
import { makeStyles } from "@mui/styles";
import PropTypes from "prop-types";
import useTranslation from "../../utils/useTranslation";
const useStyles = makeStyles({
  legendItem: {
    margin: "0 0 5 0",
    display: "flex",
    alignItems: "center",
    position: "relative"
  },
  legendSymbol: {
    width: 45,
    minWidth: 45,
    height: 18,
    margin: 5,
    marginLeft: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flex: "0 0 35px"
  },
  legendText: {
    position: "absolute",
    color: "white",
    fontWeight: "bold",
    padding: "0 3px",
    fontSize: 13,
    width: 26,
    height: 15
  },
  legendLine: {
    position: "absolute",
    width: 4,
    height: 44,
    // not 45, otherwise it looks blurry
    transform: "rotate(90deg)"
  }
});
const propTypes = {
  shortName: PropTypes.string.isRequired,
  longName: PropTypes.string.isRequired,
  color: PropTypes.string.isRequired
};
function OperatorLegend(_ref) {
  let {
    shortName,
    longName,
    color
  } = _ref;
  const {
    t
  } = useTranslation();
  const classes = useStyles();
  return /*#__PURE__*/React.createElement("div", {
    className: classes.legendItem,
    key: shortName
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.legendSymbol
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.legendLine,
    style: {
      backgroundColor: color
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.legendText,
    style: {
      backgroundColor: color
    }
  }, /*#__PURE__*/React.createElement("span", null, shortName.substring(0, 3)))), /*#__PURE__*/React.createElement("div", null, t(longName)));
}
OperatorLegend.propTypes = propTypes;
export default /*#__PURE__*/React.memo(OperatorLegend);
//# sourceMappingURL=OperatorLegend.js.map