import React from "react";
import styled, { keyframes } from "styled-components";
import Logo from "./Logo";

const LoadingDiv = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;

const fade = keyframes`
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
`;

const LogoDiv = styled.div`
  width: 50px;
  animation: ${fade} 0.9s linear infinite;
`;

const TextDiv = styled.div`
  margin-top: 20px;
`;

export default ({ width, height, text, logoWidth, logoColor }: any) => (
  <LoadingDiv style={{ width, height }}>
    <LogoDiv style={{ width: logoWidth }}>
      <Logo fill={logoColor} />
    </LogoDiv>
    {text ? <TextDiv>{text}</TextDiv> : null}
  </LoadingDiv>
);
