import { useIntl } from "react-intl"

import Caption from "@/components/TempDesignSystem/Text/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: "Membership ID:" })} {membershipNumber}
      </Caption>
    </div>
  )
}
