import React from "react";
import { makeStyles } from "@mui/styles";
import useTranslation from "../../utils/useTranslation";
import grun from "./grun.png";
import gelb from "./gelb.png";
import lila from "./lila.png";
import rot from "./rot.png";
const useStyles = makeStyles(theme => ({
  legend: {
    "& > div": {
      display: "flex",
      alignItems: "center",
      paddingTop: theme.spacing(1),
      paddingBottom: theme.spacing(1)
    },
    "& img": {
      marginRight: theme.spacing(1)
    }
  }
}));
function RegionenkarteLegend() {
  const classes = useStyles();
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/React.createElement("div", {
    className: classes.legend
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
    src: grun,
    alt: "grun",
    "data-testid": "regionenkartelegend-ost"
  }), "".concat(t("Region"), " ").concat(t("Ost"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
    src: rot,
    alt: "rot",
    "data-testid": "regionenkartelegend-sud"
  }), "".concat(t("Region"), " ").concat(t("Süd"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
    src: lila,
    alt: "lila",
    "data-testid": "regionenkartelegend-mitte"
  }), "".concat(t("Region"), " ").concat(t("Mitte"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
    src: gelb,
    alt: "gelb",
    "data-testid": "regionenkartelegend-west"
  }), "".concat(t("Region"), " ").concat(t("West"))));
}
export default RegionenkarteLegend;
//# sourceMappingURL=RegionenkarteLegend.js.map