import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme, Text, ActivityIndicator, Surface } from 'react-native-paper';

export interface LoadingScreenProps {
  /** Optional message shown below the spinner */
  message?: string;
}

/**
 * Full-screen loading overlay with a centered ActivityIndicator on a
 * surface-coloured background.  Intended for splash screens, data
 * fetching states, and navigation transitions.
 */
export function LoadingScreen({ message }: LoadingScreenProps) {
  const theme = useTheme();

  return (
    <Surface style={[styles.container, { backgroundColor: theme.colors.surface }]}>
      <View style={styles.content}>
        <ActivityIndicator
          size="large"
          color={theme.colors.primary}
        />
        {message ? (
          <Text
            style={[styles.message, { color: theme.colors.onSurfaceVariant }]}
            variant="bodyMedium"
          >
            {message}
          </Text>
        ) : null}
      </View>
    </Surface>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 16,
  },
  message: {
    marginTop: 4,
  },
});