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

type Props = {
    item: CardBank,
    handleOpenDeleteDialog: () => void,
    setSelectedCard: (value: string | number | null) => void,
}

export const BankCart: FC<Props> = ({ item, handleOpenDeleteDialog, setSelectedCard }) => {
    const handleDeleteCard = () => {
        handleOpenDeleteDialog()
        setSelectedCard(item?.id)
    }
    return (
        <div className={`w-full flex flex-col justify-between rounded-[40px] bg-auth-form p-[18px] cursor-pointer bank-bg min-h-[226px]`} style={{ backgroundImage: `url('/svgs/banks/${findBankByPAN(item.PAN)?.name}.svg')` }}>
            <div className="flex flex-row justify-between items-center">
                <div className="flex flex-row gap-3 items-center">
                    {findBankByPAN(item.PAN).icon}
                    <p className="text-lg font-medium text-primary-text-color">بانک  {findBankByPAN(item.PAN)?.name_farsi}</p>
                </div>
                <div className="flex flex-row gap-3 items-center">
                    <Trash color="#777577" onClick={handleDeleteCard} />
                    <Edit color="#777577" />
                </div>
            </div>
            <p className="font-medium text-2xl text-primary-text-color text-center" style={{ direction: "ltr" }}>{formatCartNumber(item?.PAN)}</p>
            <div className="flex flex-row items-center justify-between">
                <p className="text-sm text-secondary-text-color font-medium">{item?.holderName}</p>
                <p className="font-medium text-lg text-primary-text-color">{item?.IBAN}</p>
            </div>
        </div>
    )
}