import React from 'react';
import { View, ActivityIndicator, StyleSheet, Modal, Dimensions } from 'react-native';
import { useAppTheme } from '../context/ThemeContext';

interface LoadingOverlayProps {
  visible: boolean;
}

const { width } = Dimensions.get('window');
const LIME = '#C6F135';

export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ visible }) => {
  const { isDark } = useAppTheme();
  
  const cardBg = isDark ? '#1A1A1A' : '#FFFFFF';
  const border = isDark ? '#2A2A2A' : '#EEEEEE';

  return (
    <Modal transparent visible={visible} animationType="fade">
      <View style={styles.container}>
        <View style={[
          styles.card, 
          { backgroundColor: cardBg, borderColor: border }
        ]}>
          <ActivityIndicator size="large" color={LIME} />
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    width: 90,
    height: 90,
    borderRadius: 24,
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.2,
    shadowRadius: 20,
    elevation: 10,
  },
});