import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { useAppTheme } from '@theme';
import { getStyles } from './loadingOverlay.styles';

interface LoadingOverlayProps {
  visible: boolean;
  message?: string;
}

export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({
  visible,
  message = 'Loading...',
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  if (!visible) return null;

  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <ActivityIndicator size="large" color={colors.primary} />
        {message ? <Text style={styles.message}>{message}</Text> : null}
      </View>
    </View>
  );
};
export default LoadingOverlay;