/** biome-ignore-all lint/style/useNamingConvention: <The codes are expected as is..> */

import { asp as g } from "@asp/asp";
import { Image } from "expo-image";
import type { FC } from "react";
import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
import type { PaymentTypeCode } from "../types";

const Images = {
	OM: require("@assets/operators/orange_money.png"),
	MTN: require("@assets/operators/mtn_money.png"),
	WAVE: require("@assets/operators/wave_money.png"),
	FLOOZ: require("@assets/operators/moov_money.png"),
	CB: require("@assets/operators/visa_card.png"),
};

type PaymentTypeProps = Omit<TouchableOpacityProps, "children"> & { type: PaymentTypeCode };

const PaymentType: FC<PaymentTypeProps> = ({ style, type, ...rest }) => {
	return (
		<TouchableOpacity
			style={[g.rounded_md, g.overflow_hidden, { height: 70, width: 100 }, style]}
			{...rest}
		>
			<Image source={Images[type]} style={[g.flex_1]} cachePolicy={"memory-disk"} />
		</TouchableOpacity>
	);
};

export default PaymentType;
