import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"

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

import type { UserProps } from "@/types/components/myPages/user"

export default async function Points({ user }: UserProps) {
  const { formatMessage } = await getIntl()
  const membership = getMembership(user.memberships)
  return (
    <section className={styles.points}>
      <article>
        <Body color="white" textAlign="center">
          {formatMessage({ id: "Total Points" })}
        </Body>
        <Title color="white" level="h2" textAlign="center">
          {membership ? membership.currentPoints : "N/A"}
        </Title>
      </article>
      <article>
        <Body color="white" textAlign="center">
          {formatMessage({ id: "Points until next level" })}
          {/* TODO */}
        </Body>
        <Title color="white" level="h2" textAlign="center">
          {membership ? membership.currentPoints : "N/A"}
        </Title>
      </article>
    </section>
  )
}
