import { getCreditCardType } from '../utils';
import React from 'react';
import { cardImages } from '../views/saved-card-option';
import { Image } from '@akinon/next/components';

export const CardLabel = ({ card }) => (
  <label className="flex flex-col w-full cursor-pointer md:flex-row md:items-center md:justify-between">
    <p className="w-full text-[10px] lg:w-1/3">{card.masked_card_number}</p>
    <Image
      className="w-8 h-6 object-contain flex items-center justify-center"
      width={50}
      height={50}
      src={cardImages[getCreditCardType(card.masked_card_number)].src}
      alt={card.name}
    />
  </label>
);