import { useIntl } from "react-intl"

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

import { PAYMENT_METHOD_TITLES ,type  PaymentMethodEnum } from "@/constants/booking"

import PaymentOption from "../PaymentOption"

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

import type { CreditCard } from "@/types/user"

interface MySavedCardsProps {
  savedCreditCards: CreditCard[] | null
}

export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
  const intl = useIntl()

  return (
    <section className={styles.section}>
      <Typography variant="Title/Overline/sm">
        <h4>{intl.formatMessage({ id: "MY SAVED CARDS" })}</h4>
      </Typography>
      <div className={styles.paymentOptionContainer}>
        {savedCreditCards?.map((savedCreditCard) => (
          <PaymentOption
            key={savedCreditCard.id}
            name="paymentMethod"
            value={savedCreditCard.id}
            label={
              PAYMENT_METHOD_TITLES[
                savedCreditCard.cardType as PaymentMethodEnum
              ]
            }
            cardNumber={savedCreditCard.truncatedNumber}
          />
        ))}
      </div>
    </section>
  )
}