import React from "react";
import { View, ActivityIndicator, Text, StyleSheet } from "react-native";
import { spacing, fontSize } from "../../theme";
import { useTheme } from "../../context/ThemeContext";

interface LoadingSpinnerProps {
    message?: string;
    size?: "small" | "large";
}

export default function LoadingSpinner({
    message,
    size = "large",
}: LoadingSpinnerProps) {
    const { colors } = useTheme();
    return (
        <View style={[styles.container, { backgroundColor: colors.bgPrimary }]}>
            <ActivityIndicator size={size} color={colors.accent} />
            {message && (
                <Text style={[styles.text, { color: colors.textSecondary }]}>
                    {message}
                </Text>
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        padding: spacing.xl,
    },
    text: {
        fontSize: fontSize.md,
        marginTop: spacing.l,
    },
});