"use client"
import { useIntl } from "react-intl"

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

import { formatDate, type HotelData } from "./util"

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

export function OfferPrice(offer: HotelData["rewardNight"]["campaign"]) {
  const intl = useIntl()

  return (
    <div className={styles.offerPrice}>
      <Typography variant="Body/Paragraph/mdBold">
        <p className={styles.highlightedText}>
          {intl.formatMessage({
            id: "rewardNights.offerPrice",
            defaultMessage: "Offer price",
          })}
        </p>
      </Typography>
      <Typography variant="Label/xsBold">
        <p>
          {intl.formatMessage({
            id: "rewardNights.stayBetween:",
            defaultMessage: "Stay between:",
          })}
        </p>
      </Typography>
      <Typography variant="Label/xsRegular">
        <time>
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          {formatDate(offer.start)} - {formatDate(offer.end)}
        </time>
      </Typography>
    </div>
  )
}