import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AboutSystemComponent from "./AboutSystemComponent";
import SystemVersionContainer from "./SystemVersionContainer";

const useStyles = makeStyles(theme => {
  return {
    page: {
      display: "flex",
      flexDirection: "column"
    },
    element: {
      marginTop: theme.spacing(1)
    }
  };
});

const AboutSystemContainer = () => {
  const classes = useStyles();

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

  return (
    <div className={classes.page}>
      <AboutSystemComponent handleOpenInNewTab={handleOpenInNewTab} />
      <div className={classes.element}>
        <SystemVersionContainer />
      </div>
    </div>
  );
};
export default AboutSystemContainer;