import { useIntl } from "react-intl"

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

import PaymentOptionsGroup from "../EnterDetails/Payment/PaymentOptionsGroup"
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()
  const mySavedCardsLabel = intl.formatMessage({
    defaultMessage: "MY SAVED CARDS",
  })

  return (
    <section className={styles.section}>
      <PaymentOptionsGroup
        name="paymentMethod"
        label={mySavedCardsLabel}
        className={styles.paymentOptionContainer}
      >
        {savedCreditCards?.map((savedCreditCard) => (
          <PaymentOption
            key={savedCreditCard.id}
            value={savedCreditCard.id}
            label={
              PAYMENT_METHOD_TITLES[
                savedCreditCard.cardType as PaymentMethodEnum
              ]
            }
            cardNumber={savedCreditCard.truncatedNumber}
          />
        ))}
      </PaymentOptionsGroup>
    </section>
  )
}