ppc_amnet/amnet-native/components/AimeCard.tsx

import {useMemo} from "react";
import {Text} from "react-native";
import {CreditCard, History} from "lucide-react-native";

import TimeAgo from "./TimeAgo";
import {AMCardData} from "../models/AMCard";
import {AMUICard, AMUICardActionProps, AMUICardDetail} from "./AMUICard";

export interface AimeCardProps extends AMUICardActionProps {
    card: AMCardData,
    showFullCardNumber?: boolean
}

export function AimeCard(props: AimeCardProps) {
    const displayedCardNumber = useMemo(() => props.showFullCardNumber
            ? props.card.code.match(/.{1,4}/g)?.join(" ")
            : `•••• ${props.card.code.substring(props.card.code.length - 4)}`,
        [props.showFullCardNumber, props.card.code]);

    return (
        <AMUICard title={props.card.name} {...props}>
            <AMUICardDetail>
                <CreditCard size={18} color="gray"/>
                <Text style={{color: "gray", fontFamily: "JetBrainsMono_400Regular"}}>{displayedCardNumber}</Text>
            </AMUICardDetail>
            {props.card.lastUsed && (
                <AMUICardDetail>
                    <History size={18} color="gray"/>
                    <TimeAgo style={{color: "gray"}} dateTo={props.card.lastUsed}/>
                </AMUICardDetail>
            )}
        </AMUICard>
    );
}