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 { formatMessage } = await getIntl()
  const classNames = membershipNumberVariants({ className, color })

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