import React, { memo } from "react";

import Spottable from "@enact/spotlight/Spottable";

import { getFormattingCardNo } from "../../../../../../utils/helperMethods";
import css from "./PaymentItem.module.less";

const CardItem = Spottable("div");

export default memo(function PaymentItem({ easyPmtSeq, cardKnd, cardNo }) {
  return (
    <CardItem className={css.card} aria-label={cardKnd + ", 1 of 1"}>
      <h2 className={css.cardKnd}>{cardKnd.toUpperCase()}</h2>
      <p className={css.cardNo}>{getFormattingCardNo(cardNo)}</p>
    </CardItem>
  );
});
