import type React from "react";
import { Dimensions, View } from "react-native";
import PaymentOption from "./PaymentOption";
import Box from "./bases/Box";

const PaymentsOptionsRendererTwoColumn = () => {
	return (
		<View>
			<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
				<PaymentOptionContainer>
					<PaymentOption
						onPress={() => navigation.navigate("paymentAmountInputScreen")}
						paymentMethod={"OrangeMoney"}
					/>
				</PaymentOptionContainer>
				<PaymentOptionContainer>
					<PaymentOption
						onPress={() => navigation.navigate("paymentAmountInputScreen")}
						paymentMethod={"MtnMoney"}
					/>
				</PaymentOptionContainer>
			</Box>
			<Box flexDirection={"row"} justifyContent={"space-between"} mb={"s"}>
				<PaymentOptionContainer>
					<PaymentOption
						onPress={() => navigation.navigate("paymentAmountInputScreen")}
						paymentMethod={"MoovMoney"}
					/>
				</PaymentOptionContainer>
				<PaymentOptionContainer>
					<PaymentOption
						onPress={() => navigation.navigate("paymentAmountInputScreen")}
						paymentMethod={"WaveMoney"}
					/>
				</PaymentOptionContainer>
			</Box>
			<PaymentOptionContainer>
				<PaymentOption
					onPress={() => navigation.navigate("paymentAmountInputScreen")}
					paymentMethod={"VisaCard"}
				/>
			</PaymentOptionContainer>
		</View>
	);
};

const screenWidth = Dimensions.get("window").width;
const paymentOptionCardWidth = screenWidth / 2 - 30;
const paymentOptionCardHeight = paymentOptionCardWidth * 0.65;
const PaymentOptionContainer = ({ children }: { children: React.ReactNode }) => {
	return (
		<Box width={paymentOptionCardWidth} height={paymentOptionCardHeight}>
			{children}
		</Box>
	);
};

export default PaymentsOptionsRendererTwoColumn;