import React from 'react';
import { ActivityIndicator, View, StyleSheet, Text } from 'react-native';
import { COLORS, FONT_SIZE, SPACING } from '../../theme';
import { useTheme } from '../../theme';

interface SpinnerProps {
  size?: 'small' | 'large';
  color?: string;
  centered?: boolean;
  label?: string;
}

export function Spinner({ size = 'large', color, centered = false, label }: SpinnerProps) {
  const { theme } = useTheme();
  const spinnerColor = color ?? COLORS.primary;

  if (centered) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size={size} color={spinnerColor} />
        {label ? <Text style={[styles.label, { color: theme.textSecondary }]}>{label}</Text> : null}
      </View>
    );
  }

  return <ActivityIndicator size={size} color={spinnerColor} />;
}

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: SPACING.xxxl,
    gap: SPACING.md,
  },
  label: { fontSize: FONT_SIZE.sm },
});