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

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" />
      <Typography variant="Body/Paragraph/mdBold">
        <span>{card.type}</span>
      </Typography>
      <Typography
        variant="Body/Paragraph/mdRegular"
        className={styles.cardNumber}
      >
        <span>{maskedCardNumber}</span>
      </Typography>
      <DeleteCreditCardConfirmation card={card} />
    </div>
  )
}