import React from 'react';
import { useSelector } from 'react-redux';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import { T } from 'Framework/i18n';
import './Style.scss';

const ErrorPage = () => {
    const is404Error = useSelector(state => state?.api?.has404Error);
    return (
        <div className="error-wrapper">
            <div className="error-icon" />

            <div>
                <Typography variant="h1" className="header">
                    {T('errorPage.title')}
                </Typography>
                <Typography className="text">{T('errorPage.errorTexts.first')}</Typography>
                <Typography className="text">{T('errorPage.errorTexts.second')}</Typography>
                {is404Error && <Typography className="text">{T('errorPage.errorTexts.404')}</Typography>}
            </div>

            <Button
                variant="contained"
                color="secondary"
                className="button"
                onClick={() => {
                    window.location.reload();
                }}
            >
                {T('errorPage.reloadButton')}
            </Button>
        </div>
    );
};

export default ErrorPage;
