import React from 'react';
import { Modal, StyleSheet } from 'react-native';
import { ILoadingContainer, LoadingContainer } from './LoadingContainer';
import { Box } from '../Box';

interface IProps extends ILoadingContainer {
  full?: boolean;
}

export const Loading = ({ full, show, ...rest }: IProps) => {
  return full ? (
    <Modal transparent={true} visible={show} animationType="fade">
      <Box
        flex={1}
        pointerEvents="box-none"
        style={StyleSheet.absoluteFill}
        collapsable={false}
        alignItems="center"
        justifyContent="center"
        backgroundColor="whiteWithOpacity"
      >
        <LoadingContainer {...rest} />
      </Box>
    </Modal>
  ) : (
    <LoadingContainer {...rest} />
  );
};