web/packages/booking-flow/lib/components/EnterDetails/Header/index.tsx

"use client"

import { useIntl } from "react-intl"

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

import { HotelDetailsSidePeek } from "../../HotelDetailsSidePeek"

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

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

type HotelHeaderProps = {
  hotelData: HotelData & { url: string | null }
}

export default function HotelHeader({
  hotelData: { hotel, url, restaurants, additionalData },
}: HotelHeaderProps) {
  const image = hotel.hotelContent?.images
  const intl = useIntl()
  const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`

  return (
    <header className={styles.header}>
      <Image
        className={styles.hero}
        alt={image.altText || image.altText_En || ""}
        src={image.src}
        height={200}
        width={1196}
      />
      <div className={styles.wrapper}>
        <div className={styles.container}>
          <div className={styles.titleContainer}>
            <Typography variant="Title/lg" className={styles.title}>
              <h1>{hotel.name}</h1>
            </Typography>
            <Typography variant="Title/md" className={styles.mobileTitle}>
              <h1>{hotel.name}</h1>
            </Typography>
            <Typography variant="Title/Overline/sm">
              <div className={styles.address}>{addressStr}</div>
            </Typography>
          </div>

          <HotelDetailsSidePeek
            hotel={{ ...hotel, url: url }}
            restaurants={restaurants}
            additionalHotelData={additionalData}
            triggerLabel={intl.formatMessage({
              id: "destination.seeHotelDetails",
              defaultMessage: "See hotel details",
            })}
            buttonVariant="secondary"
          />
        </div>
      </div>
    </header>
  )
}