import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

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

export default function MembershipNumberBadge({
  membershipNumber,
}: {
  membershipNumber: string
}) {
  const intl = useIntl()

  return (
    <Typography variant="Body/Supporting text (caption)/smRegular">
      <span className={styles.rewardBadge}>
        {intl.formatMessage(
          {
            id: "rewards.membershipId",
            defaultMessage: "Membership ID: {id}",
          },
          { id: membershipNumber }
        )}
      </span>
    </Typography>
  )
}