import React from "react";
import { css } from '@emotion/core';
import style from "./loadingPage.module.sass";
// First way to import
import { ClipLoader } from 'react-spinners';


const LoadingPage = (props) => {

        if (props.error) {
            return (
                <div className={style.mainContainer}>
                    <div>В процессе загрузки произошла ошибка ...</div>
                    <button onClick={ props.retry }>Перезагрузить страницу</button>
                </div>
            );
        } else if (props.timedOut) {
            return (
                <div className={style.mainContainer}>
                    <div>Загрузка заняла слишком много времени ...</div>
                    <button onClick={ props.retry }>Перезагрузить страницу</button>
                </div>
            );
        } else if (props.pastDelay) {
            return (
                <div className={style.mainContainer}>
                    <div>Загрузка... Подождите пожалуйста</div>
                    <ClipLoader
                        sizeUnit={"px"}
                        size={80}
                        color={'#792c9b'}
                    />
                </div>
            );
        } else {
            return null;
        }

};


export default LoadingPage;