import React from 'react';
import styled from 'styled-components';
import {ImSpinner8} from 'react-icons/im';

const LoadingContainer = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
  background-color: orange;
  justify-content: center;
  align-items: center;
  background: transparent;
`;

const Loading = styled.div`
  animation: fa-spin 1s infinite linear;
  color: ${props => props.theme.colors.sky40};
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;

  @keyframes fa-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(359deg);
    }
  }
`;

export const FormLoading: React.FC = () => {
  return (
    <LoadingContainer>
      <Loading>
        <ImSpinner8 color="#33556d" size="50px" />
      </Loading>
      <h3>Loading...</h3>
    </LoadingContainer>
  );
};