import React from "react";
import { CircleSpinner } from "react-spinners-kit";
import styled from "styled-components";
import { theme } from "../../../../css/globalStyle";

// By default, the Parent takes up the whole space of the SubmittingContainer
// parent. This is so they can't click buttons underneath this Loader.

const Parent = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: ${theme.color.grey[900]};
  position: absolute;
  top: 0px;
  opacity: 0.7;
`;

const SubmittingText = styled.div`
  margin-right: 10px;
`;

interface Props {
  submittingText: string;
  additionalStyles?: any;
}

export const SubmittingLoader = ({
  submittingText,
  additionalStyles
}: Props) => {
  return (
    <Parent style={additionalStyles}>
      <SubmittingText>{submittingText}</SubmittingText>

      <CircleSpinner size={20} color={theme.color.grey[100]} />
    </Parent>
  );
};
