import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
const propTypes = {
  properties: PropTypes.object.isRequired,
  staticFilesUrl: PropTypes.string.isRequired
};
const useStyles = makeStyles(() => ({
  legend: {
    "& > div": {
      height: 31,
      margin: 0,
      display: "flex",
      alignItems: "center"
    },
    "& img": {
      float: "left",
      paddingRight: 10
    }
  }
}));
function ZweitausbildungSubLayerInfo(_ref) {
  let {
    properties,
    staticFilesUrl
  } = _ref;
  const {
    t
  } = useTranslation();
  const {
    infos
  } = properties.get("zweitausbildung");
  const {
    title,
    legend
  } = infos;
  const classes = useStyles();
  return /*#__PURE__*/React.createElement("div", null, title ? /*#__PURE__*/React.createElement("p", null, t(title)) : null, /*#__PURE__*/React.createElement("div", {
    className: classes.legend
  }, legend.map(item => /*#__PURE__*/React.createElement("div", {
    key: item.name
  }, /*#__PURE__*/React.createElement("img", {
    src: "".concat(staticFilesUrl, "/img/layers/zweitausbildung/").concat(item.image),
    draggable: "false",
    alt: t("Kein Bildtext")
  }), t(item.name)))));
}
ZweitausbildungSubLayerInfo.propTypes = propTypes;
export default ZweitausbildungSubLayerInfo;
//# sourceMappingURL=ZweitausbildungSubLayerInfo.js.map