import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

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}>
      <MaterialIcon icon="credit_card" color="Icon/Intense" />
      <Body textTransform="bold">{card.type}</Body>
      <Caption color="textMediumContrast">{maskedCardNumber}</Caption>
      <DeleteCreditCardConfirmation card={card} />
    </div>
  )
}
