import { useIntl } from "react-intl"

import Caption from "@scandic-hotels/design-system/Caption"

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

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

  return (
    <div className={styles.rewardBadge}>
      <Caption textAlign="center" color="uiTextHighContrast">
        {intl.formatMessage(
          {
            id: "rewards.membershipId",
            defaultMessage: "Membership ID: {id}",
          },
          { id: membershipNumber }
        )}
      </Caption>
    </div>
  )
}