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

interface OverlayProps {
  isUploading: boolean;
  transparent?: boolean;
  animationType?: "fade" | "slide" | "none";
  statusBarTranslucent?: boolean;
  size?: number;
  color?: string;
}

export const Overlay = ({
  isUploading,
  size = 32,
  color = "#fff",
  transparent = true,
  animationType = "fade",
  statusBarTranslucent = true,
}: OverlayProps) => {
  return (
    <Modal
      visible={isUploading}
      transparent={transparent}
      animationType={animationType}
      statusBarTranslucent={statusBarTranslucent}
    >
      <View style={styles.loaderOverlay}>
        <ActivityIndicator size={size} color={color} />
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  loaderOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center",
  },
});