web/apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/NextStayContent.tsx

import { dt } from "@scandic-hotels/common/dt"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

import { getDaysUntilText } from "../utils/getDaysUntilText"

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

import type { Stay } from "@scandic-hotels/trpc/routers/user/output"

interface NextStayContentProps {
  nextStay: Stay
}

export default async function NextStayContent({
  nextStay,
}: NextStayContentProps) {
  const lang = await getLang()
  const intl = await getIntl()

  const { attributes } = nextStay
  const {
    checkinDate,
    checkoutDate,
    confirmationNumber,
    hotelInformation,
    isWebAppOrigin,
    bookingUrl,
  } = attributes

  const daysUntilText = getDaysUntilText(checkinDate, lang, intl)

  return (
    <article className={styles.nextStayCard}>
      <div className={styles.imageContainer}>
        <Image
          className={styles.image}
          alt={
            hotelInformation.hotelContent.images.altText ||
            hotelInformation.hotelContent.images.altText_En ||
            hotelInformation.hotelName
          }
          src={hotelInformation.hotelContent.images.src}
          width={600}
          height={338}
          priority
        />
        <div className={styles.imageOverlay}>
          <Typography variant="Title/Decorative/lg">
            <span className={styles.overlayText}>
              {intl.formatMessage({
                id: "nextStay.myStayAt",
                defaultMessage: "My Stay at",
              })}
            </span>
          </Typography>
          <Typography variant="Title/lg">
            <span className={styles.overlayText}>
              {hotelInformation.hotelName}
            </span>
          </Typography>
        </div>
      </div>

      <div className={styles.content}>
        <div className={styles.header}>
          <Typography variant="Title/sm">
            <span className={styles.daysUntil}>
              <MaterialIcon
                className={styles.daysUntilIcon}
                icon="calendar_clock"
                color="Icon/Interactive/Default"
              />
              {daysUntilText}
            </span>
          </Typography>

          <Typography variant="Title/Subtitle/lg">
            <p className={styles.address}>
              <MaterialIcon
                icon="location_on"
                color="Icon/Interactive/Default"
                className={styles.addressIcon}
              />
              {hotelInformation.cityName}
            </p>
          </Typography>
        </div>

        <div className={styles.booking}>
          <div className={styles.bookingInfo}>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {intl.formatMessage({
                  id: "common.bookingNumber",
                  defaultMessage: "Booking number",
                })}
              </p>
            </Typography>
            <Typography variant="Title/Subtitle/md">
              <p>{confirmationNumber}</p>
            </Typography>
          </div>

          <Divider variant="horizontal" color="Border/Divider/Default" />

          <div className={styles.bookingInfo}>
            <Typography variant="Body/Paragraph/mdRegular">
              <span>
                <MaterialIcon icon="calendar_month" color="Icon/Default" />
                {intl.formatMessage({
                  id: "common.dates",
                  defaultMessage: "Dates",
                })}
              </span>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <span className={styles.fromToDates}>
                <time>{dt(checkinDate).locale(lang).format("D MMM YYYY")}</time>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {"→"}
                <time>
                  {dt(checkoutDate).locale(lang).format("D MMM YYYY")}
                </time>
              </span>
            </Typography>
          </div>
        </div>
        {isWebAppOrigin ? (
          <div className={styles.actions}>
            <ButtonLink
              variant="Tertiary"
              color="Inverted"
              size="md"
              href={bookingUrl}
              className={styles.cta}
            >
              {intl.formatMessage({
                id: "nextStay.seeDetailsAndExtras",
                defaultMessage: "See details & extras",
              })}
              <MaterialIcon
                icon="keyboard_arrow_right"
                color="CurrentColor"
                size={24}
              />
            </ButtonLink>
          </div>
        ) : null}
      </div>
    </article>
  )
}