web/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

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

import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Alert from "@/components/TempDesignSystem/Alert"
import { getIntl } from "@/i18n"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"

import ReadMore from "../../ReadMore"
import TripAdvisorChip from "../../TripAdvisorChip"
import HotelDescription from "./HotelDescription"

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

import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCard"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"

export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
  const intl = await getIntl()

  const sortedFacilities = hotel.detailedFacilities
    .sort((a, b) => b.sortOrder - a.sortOrder)
    .slice(0, 5)

  const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])

  return (
    <article className={styles.container}>
      <section className={styles.wrapper}>
        <div className={styles.imageWrapper}>
          <ImageGallery title={hotel.name} images={galleryImages} fill />
          {hotel.ratings?.tripAdvisor && (
            <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
          )}
        </div>
        <div className={styles.hotelContent}>
          <div className={styles.hotelInformation}>
            <Typography variant="Title/md">
              <h1 className={styles.hotelName}>{hotel.name}</h1>
            </Typography>
            <div className={styles.hotelAddressDescription}>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <p className={styles.hotelAddress}>
                  {intl.formatMessage(
                    {
                      defaultMessage:
                        "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
                    },
                    {
                      address: hotel.address.streetAddress,
                      city: hotel.address.city,
                      distanceToCityCenterInKm: getSingleDecimal(
                        hotel.location.distanceToCentre / 1000
                      ),
                    }
                  )}
                </p>
              </Typography>
              <Typography variant="Body/Paragraph/mdRegular">
                <p className={styles.hotelDescription}>
                  {hotel.hotelContent.texts.descriptions?.medium}
                </p>
              </Typography>
              <HotelDescription
                description={hotel.hotelContent.texts.descriptions?.medium}
                hotel={hotel}
                sortedFacilities={sortedFacilities}
              />
            </div>
          </div>
          <Divider variant="vertical" />
          <div className={styles.facilities}>
            <div className={styles.facilityList}>
              {sortedFacilities?.map((facility) => (
                <div className={styles.facilitiesItem} key={facility.id}>
                  <FacilityToIcon id={facility.id} color="Icon/Default" />
                  <Typography variant="Body/Supporting text (caption)/smRegular">
                    <p>{facility.name}</p>
                  </Typography>
                </div>
              ))}
            </div>
            <ReadMore
              label={intl.formatMessage({
                defaultMessage: "See all amenities",
              })}
              hotelId={hotel.operaId}
              showCTA={false}
              sidePeekKey={SidePeekEnum.amenities}
            />
          </div>
        </div>
      </section>
      {hotel.specialAlerts.map((alert) => (
        <div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
          <Alert
            key={alert.id}
            type={alert.type}
            heading={alert.heading}
            text={alert.text}
          />
        </div>
      ))}
    </article>
  )
}

export function HotelInfoCardSkeleton() {
  return (
    <article className={styles.container}>
      <section className={styles.wrapper}>
        <div className={styles.imageWrapper}>
          <SkeletonShimmer height="100%" width="100%" />
        </div>
        <div className={styles.hotelContent}>
          <div className={styles.hotelInformation}>
            <SkeletonShimmer width="60ch" height="40px" />
            <div className={styles.hotelAddressDescription}>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <SkeletonShimmer width="40ch" />
              </Typography>
              <Typography variant="Body/Paragraph/mdRegular">
                <p>
                  <SkeletonShimmer width="60ch" />
                  <SkeletonShimmer width="58ch" />
                  <SkeletonShimmer width="45ch" />
                </p>
              </Typography>
            </div>
          </div>
          <Divider variant="vertical" />
          <div className={styles.facilities}>
            <div className={styles.facilityList}>
              <Typography
                variant="Body/Paragraph/mdBold"
                className={styles.facilityTitle}
              >
                <SkeletonShimmer width="20ch" />
              </Typography>
              {[1, 2, 3, 4, 5]?.map((id) => {
                return (
                  <div className={styles.facilitiesItem} key={id}>
                    <SkeletonShimmer width="10ch" />
                  </div>
                )
              })}
            </div>
            <div className={styles.hotelAlert}>
              <SkeletonShimmer width="18ch" />
            </div>
          </div>
        </div>
      </section>
    </article>
  )
}