import BalanceContainer from "@components/BalanceContainer";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import Button from "@components/Button";
import Input from "@components/Input";
import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
import Box from "@components/bases/Box";
import { SafeAreaView } from "react-native-safe-area-context";

const PaymentAmountInputScreen = () => {
	return (
		<BackgroundGreenWhiteContentArea>
			<SafeAreaView>
				<Box style={{ height: "100%", width: "100%" }}>
					<Box
						px={"l"}
						flexDirection={"row"}
						justifyContent={"space-between"}
						alignItems={"center"}
						mb={"l"}
					>
						<BeasyLogoIcon />
					</Box>
					<Box height={150} alignItems={"center"} justifyContent={"center"}>
						<BalanceContainer balance={78000} label="Total des ventes" />
					</Box>
					<Box p={"l"} paddingTop={"x64"}>
						<Box mb={"xl"}>
							<Input
								label="Entrez le montant"
								autoFocus={true}
								keyboardType="numeric"
							/>
						</Box>
						<Button
							onPress={() => {}}
							variant={"full"}
							textVariants={"primary"}
							label="Confirmer"
						/>
					</Box>
				</Box>
			</SafeAreaView>
		</BackgroundGreenWhiteContentArea>
	);
};

export default PaymentAmountInputScreen;