"use client"

import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"

import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"

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

import type { Dayjs } from "dayjs"

export default function ExpirationDate({
  expirationDate,
}: {
  expirationDate: Dayjs | string
}) {
  const intl = useIntl()
  const lang = useLang()

  return (
    <div className={styles.badge}>
      <Body textTransform="bold">
        {intl.formatMessage(
          {
            defaultMessage: "Valid through {expirationDate}",
          },
          {
            expirationDate: dt(expirationDate)
              .locale(lang)
              .utc()
              .format("D MMM YYYY"),
          }
        )}
      </Body>
    </div>
  )
}
