import Caption from "@scandic-hotels/design-system/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: "overview.membershipNumber.label",
          defaultMessage: "Membership ID:",
        })}
      </Caption>
      <span className={styles.icon}>
        <Caption className={styles.icon} color="pale" asChild>
          <code data-hj-suppress>
            {membership?.membershipNumber ??
              intl.formatMessage({
                id: "common.NA",
                defaultMessage: "N/A",
              })}
          </code>
        </Caption>
        {membership?.membershipNumber && (
          <CopyButton membershipNumber={membership.membershipNumber} />
        )}
      </span>
    </div>
  )
}