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

const Parent = styled.div.attrs({
  className: "f3 fw7 animate__animated animate__fadeIn faster"
})`
  z-index: 100;
`;

const SubContainer = styled.div`
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${theme.color.grey[100]};
  background: #a4a4a461;
`;

interface Props {
  submitted: boolean;
  submitError?: string;
  submittingText?: string;
  successText?: string;
  loader?: JSX.Element;
  result?: JSX.Element;
}

export const SubmittingContainer = ({ submitted, loader, result }: Props) => {
  return (
    <Parent id="submitContainer">
      {submitted ? (
        <>{result && <SubContainer>{result}</SubContainer>}</>
      ) : (
        <>{loader && <SubContainer>{loader}</SubContainer>}</>
      )}
    </Parent>
  );
};
