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

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}>
      <ImageBackground style={styles.backgroundImage} source={imageSource}>
        {children}
      </ImageBackground>
    </View>
  );
}