import React from 'react';
import Logo from '../Logo';
import './styles.scss';

const reload = () => { window.location.reload(); };

const ErrorState = () => {
    const link = (
        <a
            onClick={reload}
            rel="noopener noreferrer"
        >
            reloading the page
        </a>
    );

    return (
        <div className="ErrorState">
            <div className="ErrorState__header">
                <div className="ErrorState__logo">
                    <Logo />
                </div>
            </div>
            <div className="ErrorState__content">
                <div className="ErrorState__content-row">
                    <div className="ErrorState__smile">
                        <span
                            role="img"
                            aria-label="Neutral Face"
                        >
                            😐
                        </span>
                    </div>
                    <h1 className="ErrorState__title">
                        Oops! Something went wrong.
                    </h1>
                    <p className="ErrorState__body">
                        There might be a problem here. Please try {link}.
                    </p>
                </div>
            </div>
        </div>
    );
};

export default ErrorState;