/* Dependencies */
import React from 'react'
import { ActivityIndicator, Modal, StyleSheet, View } from 'react-native'

/* Types */
type Props = {
	/**
	 * Whether the loader is visible
	 */
	visible: boolean
}

const LoaderCircle = ({ visible }: Props) => {
	return (<Modal
		animationType={'none'}
		transparent={true}
		visible={visible}>
		<View style={styles.container}>
			<View style={styles.indicator}>
				<ActivityIndicator
					animating={true}
					color='#000000'
					size={'large'} />
			</View>
		</View>
	</Modal>)
}

LoaderCircle.displayName = 'Loader.Circle'

const styles = StyleSheet.create({
	container: {
		alignItems: 'center',
		backgroundColor: '#00000040',
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'space-around'
	},
	indicator: {
		alignItems: 'center',
		backgroundColor: '#FFFFFF',
		borderRadius: 10,
		display: 'flex',
		height: 100,
		justifyContent: 'space-around',
		width: 100
	}
})

export default LoaderCircle