import * as React from "react";
import { StyleSheet, View } from "react-native";

import { useTheme } from "@applicaster/zapp-react-native-utils/theme";

import { Spinner } from "../Spinner";

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: "center",
    justifyContent: "center",
  },
});

export const OpaqueLayer = () => {
  const theme = useTheme();

  return (
    <View
      style={[
        styles.container,
        {
          // we assume that it's non-transparent and we could show spinner always until it will be covered by player
          // this spinner hides all content under modal
          backgroundColor: theme?.app_background_color,
        },
      ]}
    >
      <Spinner />
    </View>
  );
};