import { _ } from "@/lib/translation"

import { GoodFriend } from "@/components/Levels"
import BiroScript from "@/components/TempDesignSystem/BiroScript"
import Title from "@/components/TempDesignSystem/Title"

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

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

export default function Friend({ user }: UserProps) {
  return (
    <section className={styles.friend}>
      <header className={styles.header}>
        <BiroScript className={styles.levelLabel} color="pale">
          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}>{_("Membership ID:")}</p>
          <p className={styles.membershipId}>
            {user.membership ? user.membership.membershipNumber : "N/A"}
          </p>
        </div>
      </div>
    </section>
  )
}