complete add new card

src/components/management-bank-accounts/bank-cart.tsx

@@ -1,18 +1,19 @@
 import { Edit, Trash } from "iconsax-react"
-import { formatCartNumber } from "../../utility/cart"
 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">
-                    <img src={`/svgs/banks/icons/${item?.bankName}.svg`} alt={item?.bankName} />
+                    {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">
@@ -20,7 +21,7 @@ export const BankCart: FC<Props> = ({ item }) => {
                     <Edit color="#777577" />
                 </div>
             </div>
-            <p className="font-medium text-2xl text-primary-text-color text-center" style={{ direction: "ltr" }}>{formatCartNumber(1234567891011121)}</p>
+            <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>