import React from 'react';
import { ActivityIndicator, View, Text } from 'react-native';

interface LoadingSpinnerProps {
  size?: 'small' | 'large';
  color?: string;
  text?: string;
  overlay?: boolean;
}

export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  size = 'large',
  color = '#6366f1',
  text,
  overlay = false,
}) => {
  const Container = overlay ? View : React.Fragment;
  const containerProps = overlay
    ? {
        className: 'absolute inset-0 bg-black/20 flex-1 justify-center items-center z-50',
      }
    : {};

  return (
    <Container {...containerProps}>
      <View className="items-center space-y-2">
        <ActivityIndicator size={size} color={color} />
        {text && <Text className="text-sm text-gray-600">{text}</Text>}
      </View>
    </Container>
  );
};
