import React from "react";
import { Box } from "@mui/material";
import AboutSystemComponent from "./AboutSystemComponent";
import SystemVersionContainer from "./SystemVersionContainer";

const styles = {
  page: {
    display: "flex",
    flexDirection: "column"
  },
  element: {
    marginTop: 1
  }
};

const handleOpenInNewTab = url => event => {
  window.open(url, "_blank");
  event.preventDefault();
};

const AboutSystemContainer = () => {
  return (
    <Box sx={styles.page}>
      <AboutSystemComponent onOpenInNewTab={handleOpenInNewTab} />
      <Box sx={styles.element}>
        <SystemVersionContainer />
      </Box>
    </Box>
  );
};

export default AboutSystemContainer;
