import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { color } from '~/styles/variables';

const styles = StyleSheet.create({
	normal: {
		flex: 1,
		padding: '50%',
		justifyContent: 'center',
		alignContent: 'center',
		alignItems: 'center',
	},
	overlay: {
		position: 'absolute',
		top: 0,
		bottom: 0,
		left: 0,
		right: 0,
		zIndex: 100,
		padding: 0,
		backgroundColor: 'rgba(0,0,0,0.2)',
	},
});

export const Loading = ({ overlay }) => (
	<View style={[styles.normal, overlay && styles.overlay]}>
		<ActivityIndicator size="large" color={color.blue} />
	</View>
);

Loading.propTypes = {
	overlay: PropTypes.bool,
};

Loading.defaultProps = {
	overlay: false,
};
