import Title from "@/components/TempDesignSystem/Title"

import Label from "../Label"

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

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

export default function Points({ user }: UserProps) {
  return (
    <section className={styles.points}>
      <article>
        <Label>Total Points</Label>
        <Title color="pale" level="h2">
          {user.membership ? user.membership.currentPoints : "N/A"}
        </Title>
      </article>
      <article>
        <Label>Points until next level</Label>
        <Title color="pale" level="h2">
          {user.membership ? user.membership.currentPoints : "N/A"}
        </Title>
      </article>
    </section>
  )
}