import React from 'react';
import { ActivityIndicator, StatusBar } from 'react-native';
import { SCentered } from '../s-components/layout/s-centered';
import { theme } from '../../app/theme';

type TProps = {
  variant?: 'transparent';
};

export const LoadingOverlay: React.FC<TProps> = ({ variant }) => {
  const bg =
    variant === 'transparent'
      ? theme.colors.transparent
      : theme.colors.ebonyClay;

  return (
    <SCentered bg={bg}>
      <StatusBar barStyle="light-content" translucent />
      <ActivityIndicator color={theme.colors.white} />
    </SCentered>
  );
};