import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { BrandBackground } from "@/components/BrandBackground";
import { LogoMark } from "@/components/Logo";
import { useAppTheme } from "@/contexts/ThemeContext";
import { fonts } from "@/constants/theme";

export function LoadingScreen({ message = "Loading…" }: { message?: string }) {
  const insets = useSafeAreaInsets();
  const { colors } = useAppTheme();

  return (
    <View style={styles.root}>
      <BrandBackground />
      <View
        style={[
          styles.container,
          { paddingTop: insets.top, paddingBottom: insets.bottom },
        ]}
      >
      <LogoMark />
      <ActivityIndicator size="large" color={colors.primary} />
      <Text style={[styles.message, { color: colors.mutedForeground }]}>{message}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    gap: 12,
    backgroundColor: "transparent",
  },
  message: {
    fontSize: 15,
    fontFamily: fonts.body,
  },
});