import { getMembershipCards } from "@/lib/trpc/memoizedRequests"

import { PlusCircleIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
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 MembershipCardSlot({
  params,
}: PageArgs<LangParams>) {
  setLang(params.lang)
  const intl = await getIntl()
  const membershipCards = await getMembershipCards()

  return (
    <section className={styles.container}>
      <article className={styles.content}>
        <Subtitle color="black">
          {intl.formatMessage({ id: "My membership cards" })}
        </Subtitle>
      </article>
      {membershipCards &&
        membershipCards.length > 0 &&
        membershipCards.map((card, idx) => (
          <div className={styles.card} key={idx}>
            <Subtitle className={styles.subTitle}>
              Name: {card.membershipType}
            </Subtitle>
            <span> Current Points: {card.currentPoints} </span>
            <span> Member Since: {card.memberSince}</span>
            <span> Number: {card.membershipNumber}</span>
            <span>Expiration Date: {card.expirationDate.split("T")[0]}</span>
          </div>
        ))}
      <Link href="#" variant="icon">
        <PlusCircleIcon color="burgundy" />
        <Body color="burgundy" textTransform="underlined">
          {intl.formatMessage({ id: "Add new card" })}
        </Body>
      </Link>
    </section>
  )
}
