import moment from "moment";
import "moment/locale/fr";
import { asp as g } from "@asp/asp";
import type { FC } from "react";
import { Text, View } from "react-native";
import type { Transaction } from "../types";
import PaymentType from "./PaymentType";

moment.locale("fr");

export const TransactionItem: FC<{ transaction: Transaction }> = ({ transaction }) => {
	const { type_paiement_label, reference, date, montant, status } = transaction;
	const dateObject = Date.parse(date);
	const color = status === "SUCCESS" ? "green" : status === "INITIATED" ? "orange" : "red";
	return (
		<View
			style={[
				g.w_full,
				g.p_sm,
				g.flex_row,
				g.gap_sm,
				g.rounded_sm,
				g.shadow_elevated,
				g.justify_between,
				{ backgroundColor: "white" },
			]}
		>
			<View style={[g.flex_row, g.flex_1, g.gap_sm]}>
				<View style={[g.rounded_md, g.overflow_hidden, { height: 50, width: 50 }]}>
					<PaymentType
						style={{ height: "100%", aspectRatio: 1 }}
						type={type_paiement_label}
					/>
				</View>
				<View style={[g.flex_1, { height: 50 }]}>
					<Text>{reference}</Text>
					<Text>{moment(dateObject).fromNow()}</Text>
				</View>
			</View>

			<View style={{ height: 50 }}>
				<Text style={{ color: color }}>{montant}</Text>
			</View>
		</View>
	);
};