web/packages/booking-flow/lib/components/BookingConfirmation/HotelDetails/index.tsx

"use client"

import { useIntl } from "react-intl"

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

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

import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"

export function HotelDetails({
  hotel,
}: {
  hotel: BookingConfirmation["hotel"]
}) {
  const intl = useIntl()
  return (
    <div className={styles.container}>
      <div className={styles.details}>
        <Typography variant={"Title/Subtitle/md"}>
          <h3>
            {intl.formatMessage({
              defaultMessage: "Hotel details",
            })}
          </h3>
        </Typography>
        <Typography variant={"Body/Paragraph/mdRegular"}>
          <div className={styles.hotel}>
            <p>{hotel.name}</p>
            <p>
              {intl.formatMessage(
                {
                  defaultMessage: "{streetAddress}, {zipCode} {city}",
                },
                {
                  streetAddress: hotel.address.streetAddress,
                  zipCode: hotel.address.zipCode,
                  city: hotel.address.city,
                }
              )}
            </p>
            <p>
              <Link
                className={styles.link}
                href={`tel:${hotel.contactInformation.phoneNumber}`}
              >
                {hotel.contactInformation.phoneNumber}
              </Link>
            </p>
          </div>
        </Typography>
      </div>
      <div className={styles.contact}>
        <Link
          className={styles.link}
          color="Text/Interactive/Secondary"
          href={`mailto:${hotel.contactInformation.email}`}
          textDecoration={"underline"}
        >
          {hotel.contactInformation.email}
        </Link>
        <Link
          className={styles.link}
          color="Text/Interactive/Secondary"
          href={hotel.contactInformation.websiteUrl}
          textDecoration={"underline"}
        >
          {hotel.contactInformation.websiteUrl}
        </Link>
      </div>
    </div>
  )
}