"use client"

import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

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

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}>
      <Typography variant="Body/Supporting text (caption)/smBold">
        <p>
          {intl.formatMessage(
            {
              defaultMessage: "Valid through {expirationDate}",
            },
            {
              expirationDate: dt(expirationDate)
                .locale(lang)
                .utc()
                .format("D MMM YYYY"),
            }
          )}
        </p>
      </Typography>
    </div>
  )
}