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

import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
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,
}: AccountPageComponentProps) {
  const user = await serverClient().user.get()
  const { formatMessage } = await getIntl()
  if (!user) {
    return null
  }
  const membership = getMembership(user.memberships)
  return (
    <SectionContainer>
      <SectionHeader title={title} link={link} subtitle={subtitle} />
      <div className={styles.card}>
        <h2>{`${formatMessage({ id: "Total Points" })}*`}</h2>
        <p className={styles.points}>
          {`${formatMessage({ id: "Points" })}: ${membership ? membership.currentPoints : "N/A"}`}
        </p>
        <p>
          {`*${formatMessage({ id: "Points may take up to 10 days to be displayed." })}`}
        </p>
      </div>
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
  )
}

export default CurrentPointsBalance