import type { MainStackScreenComponentProps } from "@/navigations/Types";
import Button from "@components/Button";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { Image, StyleSheet } from "react-native";

const HomeUserNotLoggedIn: MainStackScreenComponentProps<"homeUserNotLoggedIn"> = ({
	navigation,
}) => {
	return (
		<>
			<Box style={style.container} p={"xl"} backgroundColor={"white"}>
				<Box mt={"s"}>
					<Box
						height={300}
						width={300}
						backgroundColor={"primary"}
						mb={"l"}
						alignItems={"center"}
						justifyContent={"center"}
					>
						<Image
							source={require("../../assets/payment_processing.png")}
							style={style.image}
						/>
					</Box>
					<Text color={"gray"} fontSize={16} textAlign={"center"}>
						Acceptez des paiements en magasin et en ligne et recevez votre argent en
						quelques secondes
					</Text>
					<Box mt={"xl"}>
						<Button
							variant={"full"}
							textVariants={"primary"}
							label="Se connecter"
							onPress={() => navigation.navigate("userLoginScreen")}
						/>
						<Button
							variant={"clean"}
							textVariants={"secondary"}
							label="Creer un compte"
							onPress={() => {}}
						/>
					</Box>
				</Box>
			</Box>
		</>
	);
};

const style = StyleSheet.create({
	container: {
		width: "100%",
		height: "100%",
		flex: 1,
		alignItems: "center",
		justifyContent: "center",
	},
	image: {
		width: "100%",
		height: "100%",
	},
});

export default HomeUserNotLoggedIn;
