import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n"

import CopyButton from "../../Buttons/CopyButton"
import { membershipNumberVariants } from "./membershipNumberVariants"

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

import type { MembershipNumberProps } from "@/types/components/myPages/membershipNumber"

export default async function MembershipNumber({
  className,
  color,
  membership,
}: MembershipNumberProps) {
  const intl = await getIntl()
  const classNames = membershipNumberVariants({ className, color })

  return (
    <div className={classNames}>
      <Caption color="pale">
        {intl.formatMessage({ id: "Membership ID: " })}
      </Caption>
      <span className={styles.icon}>
        <Caption className={styles.icon} color="pale" asChild>
          <code>
            {membership?.membershipNumber ?? intl.formatMessage({ id: "N/A" })}
          </code>
        </Caption>
        {membership?.membershipNumber && (
          <CopyButton membershipNumber={membership.membershipNumber} />
        )}
      </span>
    </div>
  )
}
