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

import AddCreditCardButton from "@/components/Profile/AddCreditCardButton"
import CreditCardList from "@/components/Profile/CreditCardList"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"

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

import { LangParams, PageArgs } from "@/types/params"

export default async function CreditCardSlot({ params }: PageArgs<LangParams>) {
  setLang(params.lang)
  const intl = await getIntl()
  const creditCards = await serverClient().user.creditCards()

  return (
    <section className={styles.container}>
      <article className={styles.content}>
        <Subtitle type="two" color="black">
          {intl.formatMessage({ id: "My payment cards" })}
        </Subtitle>
        <Body color="black">
          {intl.formatMessage({
            id: "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
          })}
        </Body>
      </article>
      <CreditCardList initialData={creditCards} />
      <AddCreditCardButton />
    </section>
  )
}
