import React from "react";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import { useTranslation } from "react-i18next";
var ExplanationTextHeader = styled("div")({
  textAlign: "center",
  paddingTop: 30,
  paddingBottom: 50,
  userSelect: "none"
});
var ExplanationText = styled("h3")({
  fontWeight: "bold",
  color: colors.grey[500]
});
var GithubLink = styled("a")({
  color: colors.blue[500]
});

var Configure3D = function Configure3D() {
  var _useTranslation = useTranslation(),
      t = _useTranslation.t;

  return /*#__PURE__*/React.createElement(ExplanationTextHeader, null, /*#__PURE__*/React.createElement(ExplanationText, null, t("configure-3d-explanation-text-part-1"), " ", /*#__PURE__*/React.createElement(GithubLink, {
    target: "_blank",
    rel: "noopener noreferrer",
    href: "https://github.com/UniversalDataTool/universal-data-tool/issues/20"
  }, "this"), " ", t("github-issue"), "."));
};

export default Configure3D;