import React from "react";
import PropTypes from "prop-types";
import Feature from "ol/Feature";
import { makeStyles } from "@mui/styles";
import { Typography } from "@mui/material";
import useTranslation from "../../utils/useTranslation";
const useStyles = makeStyles(() => ({
  root: {
    minWidth: "max-content !important",
    maxHeight: 200,
    display: "flex",
    flexDirection: "column",
    gap: 5
  }
}));
function KilometragePopup(_ref) {
  let {
    feature
  } = _ref;
  const {
    t
  } = useTranslation();
  const classes = useStyles();
  const {
    lines
  } = feature.getProperties();
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, lines === null || lines === void 0 ? void 0 : lines.map(l => {
    return (
      /*#__PURE__*/
      // TRAFKLEIN-848: Safari only apply minWidth  the size of the child so the p must have the all width
      React.createElement(Typography, {
        key: l.line,
        style: {
          width: "max-content"
        }
      }, "".concat(t("Linien-Nr."), " ").concat(l.line), ", ", "km ".concat(Number(l.km).toFixed(2)))
    );
  }));
}
KilometragePopup.propTypes = {
  feature: PropTypes.instanceOf(Feature).isRequired
};
KilometragePopup.hideHeader = () => true;
export default KilometragePopup;
//# sourceMappingURL=KilometragePopup.js.map