import React, { JSX } from 'react';
import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import Spin from 'react-native-spinkit';
import { THEME_COLOR } from '@app/constants';

function Spinner(props: {
  containerStyle?: StyleProp<ViewStyle>;
}): JSX.Element {
  return (
    <View
      style={[
        styles.container,
        props.containerStyle ? props.containerStyle : {},
      ]}
    >
      <Spin
        isVisible={true}
        size={24}
        type={Platform.select({ android: 'FadingCircleAlt', ios: 'Arc' })}
        color={THEME_COLOR}
      />
    </View>
  );
}

export default Spinner;

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    backgroundColor: 'rgba(43, 43, 43, 0.1)',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
});