asan-installer-front/src/components/management-bank-accounts/bank-cart.tsx

import { Edit, Trash } from "iconsax-react"
import { BankCartInterface } from "../../types"
import { FC } from "react"
import { findBankByPAN, formatCartNumber } from "../../utility/cart"

type Props = {
    item: BankCartInterface
}

export const BankCart: FC<Props> = ({ item }) => {
    console.log("item=>", item)
    return (
        <div className="w-full flex flex-col justify-between rounded-[40px] bg-auth-form p-[18px] cursor-pointer bank-bg bg-bank-mehr min-h-[226px]">
            <div className="flex flex-row justify-between items-center">
                <div className="flex flex-row gap-3 items-center">
                    {findBankByPAN(item.cartNumber).icon}
                    <p className="text-lg font-medium text-primary-text-color">بانک {item?.bankPersianName}</p>
                </div>
                <div className="flex flex-row gap-3 items-center">
                    <Trash color="#777577" />
                    <Edit color="#777577" />
                </div>
            </div>
            <p className="font-medium text-2xl text-primary-text-color text-center" style={{ direction: "ltr" }}>{formatCartNumber(item?.cartNumber)}</p>
            <div className="flex flex-row items-center justify-between">
                <p className="text-sm text-secondary-text-color font-medium">{item?.cartOwner}</p>
                <p className="font-medium text-lg text-primary-text-color">IR {item?.shabaNumber}</p>
            </div>
        </div>
    )
}