import React from "react";
import { View, ActivityIndicator, StyleSheet, Text } from "react-native";

type Props = {
  visible: boolean;
  text?: string;
};

export default function LoadingOverlay({
  visible,
  text = "Loading...",
}: Props) {
  if (!visible) return null;

  return (
    <View style={styles.overlay}>
      <View style={styles.box}>
        <ActivityIndicator size="small" color="#2c3e50" />
        <Text style={styles.text}>{text}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0,0,0,0.35)",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 9999,
  },
  box: {
    paddingVertical: 5,
    paddingHorizontal: 15,
    backgroundColor: "#fff",
    borderRadius: 8,
    alignItems: "center",
    elevation: 6, // Android
    shadowColor: "#000", // iOS
    shadowOpacity: 0.25,
    shadowRadius: 5,
    shadowOffset: { width: 0, height: 4 },
  },
  text: {
    marginTop: 5,
    fontSize: 14,
    color: "#2c3e50",
  },
});