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

import MembershipLevelIcon from "@/components/Levels/Icon"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { isHighestMembership } from "@/utils/user"

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

import type { FriendProps } from "@/types/components/myPages/friend"

export default async function Friend({
  children,
  membership,
  name,
}: FriendProps) {
  const intl = await getIntl()
  if (!membership?.membershipLevel) {
    return null
  }
  const isHighestLevel = isHighestMembership(membership.membershipLevel)

  return (
    <section className={styles.friend}>
      <header className={styles.header}>
        <Body color="white" textTransform="bold" textAlign="center">
          {intl.formatMessage(
            isHighestLevel
              ? { id: "Highest floor" }
              : { id: `Level ${membershipLevels[membership.membershipLevel]}` }
          )}
        </Body>
        <MembershipLevelIcon
          level={MembershipLevelEnum[membership.membershipLevel]}
          height="110"
          width="220"
        />
      </header>
      <div className={styles.membership}>
        <Title data-hj-suppress className={styles.name} color="pale" level="h3">
          {name}
        </Title>
        {children}
      </div>
    </section>
  )
}
