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

import Header from "@/components/MyPages/Blocks/Header"

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()
  return (
    <div>
      <Header title={title} link={link} subtitle={subtitle} />

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

export default CurrentPointsBalance