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

import Header from "@/components/MyPages/Blocks/Header"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"

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

import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

async function CurrentPointsBalance({
  title,
  subtitle,
  link,
  lang,
}: AccountPageComponentProps) {
  const user = await serverClient().user.get()
  const { formatMessage } = await getIntl()
  const membership = getMembership(user.memberships)
  return (
    <div>
      <Header title={title} link={link} subtitle={subtitle} />

      <div className={styles.card}>
        <h2>{`${formatMessage({ id: "Total points" })}*`}</h2>
        <p
          className={styles.points}
        >{`${formatMessage({ id: "Points" })}: ${membership?.currentPoints || "N/A"}`}</p>
        <p className={styles.disclaimer}>
          {`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}
        </p>
      </div>
    </div>
  )
}

export default CurrentPointsBalance