web/apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/CarouselCard/index.tsx

"use client"

import { useIntl } from "react-intl"

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 useLang from "@/hooks/useLang"

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

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

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

interface CarouselCardProps {
  stay: Stay
}

export default function CarouselCard({ stay }: CarouselCardProps) {
  const intl = useIntl()
  const lang = useLang()

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

  const daysUntilText = getDaysUntilText(checkinDate, lang, intl)

  return (
    <article className={styles.card}>
      <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={400}
          height={300}
          priority
        />
        <div className={styles.imageOverlay}>
          <Typography variant="Title/Overline/sm">
            <span>{daysUntilText}</span>
          </Typography>
          <Typography variant="Title/md">
            <span>{hotelInformation.hotelName}</span>
          </Typography>
          {hotelInformation.cityName && (
            <Typography variant="Title/Overline/sm">
              <span>{hotelInformation.cityName}</span>
            </Typography>
          )}
        </div>
      </div>

      <div className={styles.content}>
        <div className={styles.infoRow}>
          <Typography variant="Body/Paragraph/mdRegular">
            <span className={styles.infoItem}>
              <MaterialIcon icon="sticky_note_2" color="Icon/Default" />
              {intl.formatMessage({
                id: "common.bookingNumber",
                defaultMessage: "Booking number",
              })}
            </span>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <span className={styles.dateRange}>{confirmationNumber}</span>
          </Typography>
        </div>
        <div className={styles.infoRow}>
          <Typography variant="Body/Paragraph/mdRegular">
            <span className={styles.infoItem}>
              <MaterialIcon icon="calendar_month" color="Icon/Default" />
              {intl.formatMessage({
                id: "common.dates",
                defaultMessage: "Dates",
              })}
            </span>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <span className={styles.dateRange}>
              <time>{dt(checkinDate).locale(lang).format("D MMM")}</time>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {" → "}
              <time>{dt(checkoutDate).locale(lang).format("D MMM, YYYY")}</time>
            </span>
          </Typography>
        </div>

        {isWebAppOrigin && (
          <>
            <Divider variant="horizontal" color="Border/Divider/Default" />
            <ButtonLink
              variant="Text"
              color="Primary"
              size="Small"
              href={bookingUrl}
            >
              {intl.formatMessage({
                id: "nextStay.seeDetailsAndExtras",
                defaultMessage: "See details & extras",
              })}
              <MaterialIcon
                icon="keyboard_arrow_right"
                color="CurrentColor"
                size={20}
              />
            </ButtonLink>
          </>
        )}
      </div>
    </article>
  )
}