import { asp as g } from "@asp/asp";
import * as Button from "@components/Button";
import { Image } from "expo-image";
import { Text, View } from "react-native";
import type { MainStackScreenComponentProps } from "@/navigations/types";

const HomeUserNotLoggedIn: MainStackScreenComponentProps<"homeUserNotLoggedIn"> = ({
	navigation,
}) => {
	return (
		<View style={[g.flex_1, g.p_5xl, g.gap_lg]}>
			<View style={[{ height: 400 }]}>
				<Image
					source={require("@assets/payment_processing.png")}
					style={{ width: "100%", height: "100%" }}
					contentFit="contain"
					cachePolicy={"memory-disk"}
				/>
			</View>
			<Text style={[g.text_center, { color: "gray" }]}>
				Acceptez des paiements en magasin et en ligne et recevez votre argent en quelques
				secondes
			</Text>

			<Button.Container
				onPress={() => navigation.navigate("userLoginScreen")}
				style={[g.mt_5xl]}
			>
				<Button.Label style={{ color: "white" }}>Se connecter</Button.Label>
			</Button.Container>
			<Button.Container style={[{ backgroundColor: "transparent" }]}>
				<Button.Label style={{ color: "green" }}>Créer un compte</Button.Label>
			</Button.Container>
		</View>
	);
};

export default HomeUserNotLoggedIn;