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

import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Divider } from "@scandic-hotels/design-system/Divider"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import Image from "@/components/Image"
import { getIntl } from "@/i18n"

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

import type { HotelListingItemProps } from "@/types/components/contentPage/hotelListingItem"

export default async function HotelListingItem({
  hotelData,
  contentType = "hotel",
}: HotelListingItemProps) {
  const intl = await getIntl()

  const { galleryImages, description, id, name, hotelType, location, address } =
    hotelData.hotel
  const image = galleryImages[0]

  const cta =
    contentType === "meeting" && hotelData.meetingUrl
      ? {
          url: hotelData.meetingUrl,
          openInNewTab: true,
          text: intl.formatMessage({
            defaultMessage: "Book a meeting",
          }),
        }
      : {
          url: hotelData.url,
          openInNewTab: false,
          text: intl.formatMessage({
            defaultMessage: "See hotel details",
          }),
        }

  return (
    <article className={styles.container}>
      <Image
        src={image.imageSizes.large}
        alt={image.metaData.altText || image.metaData.altText_En}
        width={400}
        height={300}
        sizes="(min-width: 768px) 400px, 100vw"
        className={styles.image}
      />
      <section className={styles.content}>
        <div className={styles.intro}>
          <HotelLogoIcon hotelId={id} hotelType={hotelType} />
          <Typography variant="Title/Subtitle/lg">
            <h4>{name}</h4>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div className={styles.captions}>
              <span>{address.streetAddress}</span>
              <Divider variant="vertical" />
              <span>
                {intl.formatMessage(
                  {
                    defaultMessage: "{number} km to city center",
                  },
                  {
                    number: getSingleDecimal(location.distanceToCentre / 1000),
                  }
                )}
              </span>
            </div>
          </Typography>
        </div>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{description}</p>
        </Typography>

        {cta.url ? (
          <>
            <Divider
              className={styles.ctaDivider}
              color="Border/Divider/Subtle"
            />
            <ButtonLink
              variant="Primary"
              size="Small"
              href={cta.url}
              target={cta.openInNewTab ? "_blank" : undefined}
              className={styles.button}
            >
              {cta.text}
            </ButtonLink>
          </>
        ) : null}
      </section>
    </article>
  )
}