import React from 'react';
import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native';
import { m3Colors } from '../theme/proulr-theme';

export const loadingIndicatorSize = 'large' as const;
export const loadingIndicatorColor = m3Colors.primary;

type LoadingIndicatorProps = {
  fullScreen?: boolean;
  color?: string;
  style?: ViewStyle;
};

export function AppLoadingSpinner({
  fullScreen = false,
  color = loadingIndicatorColor,
  style,
}: LoadingIndicatorProps) {
  const spinner = <ActivityIndicator color={color} size={loadingIndicatorSize} />;

  if (fullScreen) {
    return <View style={[styles.fullScreen, style]}>{spinner}</View>;
  }

  if (style) {
    return <View style={style}>{spinner}</View>;
  }

  return spinner;
}

const styles = StyleSheet.create({
  fullScreen: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});