import React from 'react';
import * as sc from './styles';
import { Box } from '../Box';
import { LoadingScreenProps } from './types';

export const LoadingScreen = (props: LoadingScreenProps) => {
  return (
    <sc.Backdrop>
      <sc.Wrapper bg="white" borderRadius="3" boxShadow="5" p="5">
        <sc.Loader {...props}>
          <span />
          <span />
        </sc.Loader>
        {props.details && (
          <Box color="gray.1" mt="m">
            {props.details}
          </Box>
        )}
      </sc.Wrapper>
    </sc.Backdrop>
  );
};
