import React from "react";
import { Grid, Paper, Typography, Button } from "@material-ui/core";
import { Link } from "react-router-dom";
import useStyles from "../styles";
import classnames from "classnames";
import ServerIsDown from "../../../../images/ServerIsDown.gif";
import { useTranslation } from "react-i18next";

const ServerNotAvailable = () => {
  const classes = useStyles();
  const { t } = useTranslation();

  return (
    <Grid container className={classnames(classes.container, classes.error)}>
      <Paper classes={{ root: classes.paperRoot }}>
        <div className={classes.imageFrame}>
          <img
            className={classes.image}
            src={ServerIsDown}
            alt="server is down"
          />
        </div>
        <Typography
          variant="h5"
          className={classnames(classes.textRow, classes.safetyText)}
        >
          {t("ServerAvailability.Unavailable")}
        </Typography>
        <Typography
          variant="h6"
          color="text"
          colorBrightness="secondary"
          className={classnames(classes.textRow, classes.safetyText)}
        >
          {t("ServerAvailability.TryAgain")}
        </Typography>
        <Button
          variant="contained"
          component={Link}
          to="/"
          size="large"
          className={classes.button}
        >
          {t("ServerAvailability.Retry")}
        </Button>
      </Paper>
    </Grid>
  );
};

export default ServerNotAvailable;
