web/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx

"use client"

import { useIntl } from "react-intl"

import { dt } from "@scandic-hotels/common/dt"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import Countdown from "@/components/Countdown"

import useRedeemFlow from "./useRedeemFlow"

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

export default function TimedRedeemedBadge() {
  const intl = useIntl()
  const { timeRemaining, setTimeRemaining } = useRedeemFlow()
  const duration = dt.duration(timeRemaining)

  return (
    <>
      <div className={styles.redeemed}>
        <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            {intl.formatMessage({
              id: "rewards.redeemed.validThrough",
              defaultMessage: "Redeemed & valid through:",
            })}
          </p>
        </Typography>
      </div>
      <Countdown
        minutes={duration.minutes()}
        seconds={duration.seconds()}
        onChange={(newTime) => setTimeRemaining(newTime)}
      />
    </>
  )
}