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

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

import { MembershipNumberProps } from "./MemershipNumber/membershipNumber"
import MembershipLevel from "./MembershipLevel"
import MembershipNumber from "./MemershipNumber"

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

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

export default async function Friend({
  user,
  color,
}: UserProps & Pick<MembershipNumberProps, "color">) {
  const { formatMessage } = await getIntl()
  const membership = getMembership(user.memberships)
  if (!membership?.membershipLevel) {
    return null
  }
  // @ts-expect-error: membershiplevel needs proper fix
  const isHighestLevel = isHighestMembership(membership.membershipLevel)

  return (
    <section className={styles.friend}>
      <header className={styles.header}>
        <Body color="white" textTransform="bold" textAlign="center">
          {formatMessage(
            isHighestLevel
              ? { id: "Highest level" }
              : // @ts-expect-error: membershiplevel needs proper fix
                { id: `Level ${membershipLevels[membership.membershipLevel]}` }
          )}
        </Body>
        {membership ? (
          <MembershipLevel
            // @ts-expect-error: membershiplevel needs proper fix
            level={membershipLevels[membership.membershipLevel]}
          />
        ) : null}
      </header>
      <div className={styles.membership}>
        <Title className={styles.name} color="pale" level="h3">
          {user.name}
        </Title>
        <MembershipNumber membership={membership} color={color} />
      </div>
    </section>
  )
}
