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 { Section } from "../Section"

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

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

  return (
    <Section
      title={intl.formatMessage({
        id: "profile.payment",
        defaultMessage: "Payment",
      })}
    >
      <div className={styles.container}>
        <span className={styles.content}>
          <Typography variant="Title/Subtitle/md">
            <h3>
              {intl.formatMessage({
                id: "profile.myPaymentCards",
                defaultMessage: "My payment cards",
              })}
            </h3>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <p>
              {intl.formatMessage({
                id: "profile.checkOutSavedCreditCards",
                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>
        </span>
        <CreditCardList initialData={creditCards} />
        <AddCreditCardButton />
      </div>
    </Section>
  )
}
