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

import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
import { ASSETS } from "@applicaster/zapp-react-native-ui-components/Helpers";

const imageSource: ImageURISource = {
  uri: ASSETS.APP_BACKGROUND_IMAGE,
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  backgroundImage: { width: "100%", height: "100%" },
});

export function BackgroundImage({ children }: React.PropsWithChildren) {
  return (
    <View style={styles.container}>
      <Image style={styles.backgroundImage} source={imageSource}>
        {children}
      </Image>
    </View>
  );
}