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

const HomePageWithPaymentOptions = () => {
	return (
		<BackgroundGreenWhiteContentArea>
			<SafeAreaView>
				<Box style={{ height: "100%" }}>
					<Box
						px={"l"}
						flexDirection={"row"}
						justifyContent={"space-between"}
						alignItems={"center"}
					>
						<BeasyLogoIcon />
						<NotificationIconButton />
					</Box>
					<Box height={150} alignItems={"center"} justifyContent={"center"}>
						<BalanceContainer balance={78000} label="Total des ventes" />
					</Box>
					<Box flex={1} p={"l"}>
						<Box height={100}>
							<Text fontSize={20} fontWeight={"bold"}>
								Méthode de paiement
							</Text>
						</Box>
						<Box
							flexDirection={"row"}
							style={{ flexWrap: "wrap" }}
							gap={"s"}
							justifyContent={"space-between"}
						>
							{/* Payment Modes */}
							<Box style={{ width: "48%", height: "26%" }}>
								<PaymentOption onPress={() => {}} paymentMethod={"OrangeMoney"} />
							</Box>
							<Box style={{ width: "48%", height: "26%" }}>
								<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
							</Box>

							<Box style={{ width: "48%", height: "26%" }}>
								<PaymentOption onPress={() => {}} paymentMethod={"MoovMoney"} />
							</Box>

							<Box style={{ width: "48%", height: "26%" }}>
								<PaymentOption onPress={() => {}} paymentMethod={"WaveMoney"} />
							</Box>

							<Box style={{ width: "48%", height: "26%" }}>
								<PaymentOption onPress={() => {}} paymentMethod={"VisaCard"} />
							</Box>
						</Box>
					</Box>
				</Box>
			</SafeAreaView>
		</BackgroundGreenWhiteContentArea>
	);
};

export default HomePageWithPaymentOptions;