"use client"

import { useIntl } from "react-intl"

import Countdown from "@/components/Countdown"
import { CheckCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

export default function TimedRedeemedBadge() {
  const intl = useIntl()

  return (
    <>
      <div className={styles.redeemed}>
        <CheckCircleIcon color="uiSemanticSuccess" />
        <Caption>
          {intl.formatMessage({
            id: "Redeemed & valid through:",
          })}
        </Caption>
      </div>
      <Countdown />
    </>
  )
}