import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { useColorScheme } from '@/hooks/use-color-scheme';

export function ProfileLoadingState() {
  const colorScheme = useColorScheme();
  const palette = colorScheme === 'dark' ? darkPalette : lightPalette;

  return (
    <View style={styles.loadingWrap}>
      <ActivityIndicator size="large" color={palette.accent} />
      <ThemedText style={[styles.loadingText, { color: palette.textSecondary }]}>
        Loading content...
      </ThemedText>
    </View>
  );
}

const darkPalette = {
  textSecondary: '#8E9098',
  accent: '#B7FF2F',
};

const lightPalette = {
  textSecondary: '#5E6474',
  accent: '#405CFF',
};

const styles = {
  loadingWrap: {
    alignItems: 'center' as const,
    paddingTop: 48,
    paddingBottom: 48,
  },
  loadingText: {
    marginTop: 12,
    fontSize: 14,
  },
};