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

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)
  return (
    <section className={styles.friend}>
      <header className={styles.header}>
        <BiroScript className={styles.levelLabel} color="pale">
          {formatMessage({ id: "Current level" })}:
        </BiroScript>
        <GoodFriend className={styles.level} color="pale" />
      </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>
  )
}