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

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

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 styles from "./membershipcards.module.css"

export default async function MembershipCardSlot() {
  const intl = await getIntl()
  const membershipCards = await getMembershipCards()

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