import React from "react";
import PropTypes from "prop-types";
import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
import HandicapLayer from "../../layers/HandicapLayer";
const propTypes = {
  properties: PropTypes.instanceOf(HandicapLayer).isRequired
};
const useStyles = makeStyles({
  grid: {
    display: "flex",
    gap: 10
  },
  circle: {
    height: 15,
    minWidth: 15,
    borderRadius: "50%"
  }
});
function HandicapLayerInfo(_ref) {
  let {
    properties: layer
  } = _ref;
  const {
    t
  } = useTranslation();
  const classes = useStyles();
  return /*#__PURE__*/React.createElement("div", {
    className: classes.grid
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.circle,
    style: {
      backgroundColor: layer.get("color")
    }
  }), /*#__PURE__*/React.createElement(Typography, null, t("".concat(layer.key, ".layerinfo"))));
}
HandicapLayerInfo.propTypes = propTypes;
export default HandicapLayerInfo;
//# sourceMappingURL=HandicapLayerInfo.js.map