import { ActivityIndicator, View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import { Colors, Spacing, FontSize } from '@/constants/theme';

export interface LoadingStateProps {
  text?: string;
  subText?: string;
  size?: 'small' | 'large';
  color?: string;
  style?: StyleProp<ViewStyle>;
}

export function LoadingState({
  text = '加载中...',
  subText,
  size = 'large',
  color = Colors.brand.primary,
  style,
}: LoadingStateProps) {
  return (
    <View style={[styles.container, style]}>
      <ActivityIndicator size={size} color={color} />
      {text && <Text style={styles.text}>{text}</Text>}
      {subText && <Text style={styles.subText}>{subText}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.background.secondary,
    paddingHorizontal: Spacing.xl,
  },
  text: {
    marginTop: Spacing.lg,
    fontSize: FontSize.sm,
    color: Colors.text.secondary,
    textAlign: 'center',
  },
  subText: {
    marginTop: Spacing.sm,
    fontSize: FontSize.xs,
    color: Colors.text.tertiary,
    textAlign: 'center',
  },
});