"use client"

import { useIntl } from "react-intl"

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

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" />
        <Caption>
          {intl.formatMessage({
            id: "rewards.redeemed.validThrough",
            defaultMessage: "Redeemed & valid through:",
          })}
        </Caption>
      </div>
      <Countdown
        minutes={duration.minutes()}
        seconds={duration.seconds()}
        onChange={(newTime) => setTimeRemaining(newTime)}
      />
    </>
  )
}