import type React from "react";
import { Dimensions } from "react-native";
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;