"use client"

import { useIntl } from "react-intl"

import Image from "@scandic-hotels/design-system/Image"
import Title from "@scandic-hotels/design-system/Title"
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}>
            <Title
              as="h1"
              level="h1"
              color="white"
              textAlign="center"
              className={styles.title}
            >
              {hotel.name}
            </Title>
            <Title
              as="h2"
              level="h1"
              color="white"
              className={styles.mobileTitle}
              textAlign="center"
            >
              {hotel.name}
            </Title>
            <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({
              defaultMessage: "See hotel details",
            })}
            buttonVariant={"secondary"}
          />
        </div>
      </div>
    </header>
  )
}