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

"use client"

import { Link } from "react-aria-components"
import { useIntl } from "react-intl"

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

import useLang from "@/hooks/useLang"
import { getTimeAgoText } from "@/utils/getTimeAgoText"

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

import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"

export function StayCard({ stay, ref }: StayCardProps) {
  const { bookingUrl, isWebAppOrigin: shouldLinkToMyStay } = stay.attributes

  if (!shouldLinkToMyStay) {
    return <CardContent stay={stay} />
  }

  return (
    <Link className={styles.link} href={bookingUrl} ref={ref}>
      <CardContent stay={stay} />
    </Link>
  )
}

function CardContent({ stay }: { stay: StayCardProps["stay"] }) {
  const lang = useLang()
  const intl = useIntl()

  const { checkinDate, checkoutDate, hotelInformation } = stay.attributes

  const arrival = dt(checkinDate).locale(lang)
  const arrivalDate = arrival.format("DD MMM")
  const arrivalDateTime = arrival.format("YYYY-MM-DD")
  const depart = dt(checkoutDate).locale(lang)
  const departDate = depart.format("DD MMM YYYY")
  const departDateTime = depart.format("YYYY-MM-DD")

  const timeAgoText = getTimeAgoText(checkoutDate, intl)

  return (
    <article className={styles.card}>
      {hotelInformation.hotelContent.images.src ? (
        <Image
          className={styles.image}
          alt={
            hotelInformation.hotelContent.images.altText ||
            hotelInformation.hotelContent.images.altText_En
          }
          src={hotelInformation.hotelContent.images.src}
          width={80}
          height={108}
        />
      ) : (
        <ImageFallback
          className={styles.fallback}
          height="108px"
          width="80px"
        />
      )}
      <div className={styles.content}>
        <div className={styles.details}>
          <Typography variant="Title/Subtitle/md">
            <h4 className={styles.hotelName}>{hotelInformation.hotelName}</h4>
          </Typography>

          {hotelInformation.cityName && (
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <p className={styles.cityName}>{hotelInformation.cityName}</p>
            </Typography>
          )}
        </div>

        <Divider className={styles.divider} color="Border/Divider/Subtle" />

        <div className={styles.dateSection}>
          {timeAgoText ? (
            <div className={styles.chip}>
              <Typography variant="Body/Supporting text (caption)/smBold">
                <span className={styles.chipText}>{timeAgoText}</span>
              </Typography>
            </div>
          ) : null}
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div className={styles.dates}>
              <time className={styles.dateText} dateTime={arrivalDateTime}>
                {arrivalDate}
              </time>
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              <span className={styles.dateText}>→</span>
              <time className={styles.dateText} dateTime={departDateTime}>
                {departDate}
              </time>
            </div>
          </Typography>
        </div>
      </div>
    </article>
  )
}