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

import { serverClient } from "@/lib/trpc/server"

import AddCreditCardButton from "@/components/Profile/AddCreditCardButton"
import CreditCardList from "@/components/Profile/CreditCardList"
import { getIntl } from "@/i18n"

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

export default async function CreditCardSlot() {
  const intl = await getIntl()
  const caller = await serverClient()
  const creditCards = await caller.user.creditCards()

  return (
    <section className={styles.container}>
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <h3>
            {intl.formatMessage({
              defaultMessage: "My payment cards",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              defaultMessage:
                "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
            })}
          </p>
        </Typography>
      </div>
      <CreditCardList initialData={creditCards} />
      <AddCreditCardButton />
    </section>
  )
}