import { CreditCard } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import DeleteCreditCardConfirmation from "../DeleteCreditCardConfirmation"

import styles from "./creditCardRow.module.css"

import type { CreditCardRowProps } from "@/types/components/myPages/myProfile/creditCards"

export default function CreditCardRow({ card }: CreditCardRowProps) {
  const maskedCardNumber = `**** ${card.truncatedNumber.slice(-4)}`

  return (
    <div className={styles.card}>
      <CreditCard color="black" />
      <Body textTransform="bold">{card.type}</Body>
      <Caption color="textMediumContrast">{maskedCardNumber}</Caption>
      <DeleteCreditCardConfirmation card={card} />
    </div>
  )
}
