web/components/MyPages/Blocks/Overview/Friend/index.tsx

import { membershipLevels } from "@/constants/membershipLevels"

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

import MembershipLevel from "./MemberShipLevel"

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

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

export default async function Friend({ user }: UserProps) {
  const { formatMessage } = await getIntl()
  const membership = getMembership(user.memberships)
  if (!membership?.membershipLevel) {
    return null
  }

  return (
    <section className={styles.friend}>
      <header className={styles.header}>
        <BiroScript className={styles.levelLabel} color="pale">
          {formatMessage({ id: "Current level" })}:
        </BiroScript>
        {membership ? (
          <MembershipLevel
            level={membershipLevels[membership.membershipLevel]}
          />
        ) : null}
      </header>
      <div className={styles.membership}>
        <Title className={styles.name} color="pale" level="h3">
          {user.name}
        </Title>
        <div className={styles.membershipContainer}>
          <p className={styles.membershipId}>
            {formatMessage({ id: "Membership ID" })}:
          </p>
          <p className={styles.membershipId}>
            {membership ? membership.membershipNumber : "N/A"}
          </p>
        </div>
      </div>
    </section>
  )
}