web/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx

import { useIntl } from "react-intl"

import { Divider } from "@scandic-hotels/design-system/Divider"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import ButtonLink from "@/components/ButtonLink"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"

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

import type { Hotel } from "@scandic-hotels/trpc/types/hotel"

interface HotelListingItemProps {
  hotel: Hotel
  url: string
}

export default function HotelListingItem({
  hotel,
  url,
}: HotelListingItemProps) {
  const intl = useIntl()
  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
  const tripadvisorRating = hotel.ratings?.tripAdvisor.rating
  const address = `${hotel.address.streetAddress}, ${hotel.address.city}`
  const amenities = hotel.detailedFacilities.slice(0, 5)
  const hotelDescription = hotel.hotelContent.texts.descriptions?.short

  return (
    <article className={styles.hotelListingItem}>
      <div className={styles.imageWrapper}>
        <ImageGallery
          images={galleryImages}
          fill
          sizes="(min-width: 768px) 450px, 100vw"
          title={intl.formatMessage(
            {
              defaultMessage: "{title} - Image gallery",
            },
            { title: hotel.name }
          )}
        />
        {tripadvisorRating ? (
          <Typography variant="Title/Overline/sm">
            <div className={styles.tripAdvisor}>
              <TripadvisorIcon color="CurrentColor" />
              <span>{tripadvisorRating}</span>
            </div>
          </Typography>
        ) : null}
      </div>
      <div className={styles.content}>
        <div className={styles.intro}>
          <HotelLogoIcon
            hotelId={hotel.operaId}
            hotelType={hotel.hotelType}
            height={30}
          />
          <Typography variant="Title/Subtitle/md">
            <h3>{hotel.name}</h3>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div className={styles.captions}>
              <span>{address}</span>
              <span>
                <Divider
                  className={styles.divider}
                  variant="vertical"
                  color="Border/Divider/Default"
                />
              </span>
              <span>
                {intl.formatMessage(
                  {
                    defaultMessage: "{number} km to city center",
                  },
                  {
                    number: getSingleDecimal(
                      hotel.location.distanceToCentre / 1000
                    ),
                  }
                )}
              </span>
            </div>
          </Typography>
        </div>
        {hotelDescription ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{hotelDescription}</p>
          </Typography>
        ) : null}
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <ul className={styles.amenityList}>
            {amenities.map((amenity) => {
              return (
                <li className={styles.amenityItem} key={amenity.id}>
                  <FacilityToIcon
                    id={amenity.id}
                    color="CurrentColor"
                    size={20}
                  />
                  {amenity.name}
                </li>
              )
            })}
          </ul>
        </Typography>
      </div>
      <div className={styles.ctaWrapper}>
        <ButtonLink
          href={url}
          variant="Tertiary"
          color="Primary"
          size="Small"
          typography="Body/Supporting text (caption)/smBold"
        >
          {intl.formatMessage({
            defaultMessage: "See hotel details",
          })}
        </ButtonLink>
      </div>
    </article>
  )
}