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

import { BackgroundImage } from "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage";

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    position: "absolute",
  },
});

export const Overlay = ({
  opacity,
  backgroundColor,
}: {
  opacity: Animated.Value;
  backgroundColor: string;
}) => {
  return (
    <Animated.View
      style={[
        styles.container,
        {
          opacity,
          backgroundColor,
        },
      ]}
      testID="animated-component"
    >
      <BackgroundImage />
    </Animated.View>
  );
};