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

import Card from "@/components/MyProfile/Card"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

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

export default async function CreditCards() {
  const creditCards = await serverClient().user.creditCards()
  if (!creditCards) {
    return null
  }
  const { formatMessage } = await getIntl()
  return (
    <Card className={styles.container}>
      <Title level="h4">{formatMessage({ id: "My credit cards" })}</Title>
      {creditCards.map((card, idx) => (
        <div className={styles.card} key={idx}>
          <Subtitle className={styles.subTitle}>
            Name: {card.attribute.cardName}
          </Subtitle>
          <span> Type: {card.attribute.cardType} </span>
          <span> Alias: {card.attribute.alias}</span>
          <span> Number: {card.attribute.truncatedNumber}</span>
          <span>
            Expiration Date: {card.attribute.expirationDate.split("T")[0]}
          </span>
        </div>
      ))}
    </Card>
  )
}