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

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

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

export default async function NextLevel({
  user,
  lang,
}: UserProps & LangParams) {
  const { formatMessage } = await getIntl()
  const membership = getMembership(user.memberships)

  if (!membership?.membershipLevel) {
    //  TODO: handle this case?
    return null
  }

  const nextLevel = getMembershipLevelObject(
    membership.membershipLevel,
    lang,
    "nextLevel"
  )
  if (!nextLevel) {
    // TODO: already at top level, no next level exists
    return null
  }
  return (
    <section>
      <Body color="white" textAlign="center">
        {formatMessage({ id: "Next level" })}:
      </Body>
      <Title
        className={styles.nextLevel}
        color="white"
        level="h3"
        textAlign="center"
      >
        {nextLevel?.name || "N/A"}
        <BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
      </Title>
    </section>
  )
}
