import Image from "@/components/Image"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getSingleDecimal } from "@/utils/numberFormatting"

import ToggleSidePeek from "./ToggleSidePeek"

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

import type { HotelHeaderProps } from "@/types/components/hotelReservation/enterDetails/hotelHeader"

export default async function HotelHeader({ hotelData }: HotelHeaderProps) {
  const intl = await getIntl()
  const hotel = hotelData.data.attributes

  const image = hotel.hotelContent?.images

  const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`

  return (
    <header className={styles.header}>
      <Image
        className={styles.hero}
        alt={image.metaData.altText || image.metaData.altText_En || ""}
        src={image.imageSizes.large}
        height={200}
        width={1196}
      />
      <div className={styles.wrapper}>
        <div className={styles.container}>
          <div className={styles.titleContainer}>
            <Title as="h1" level="h1" color="white" className={styles.title}>
              {hotel.name}
            </Title>
            <div className={styles.address}>
              <Caption color="white">{addressStr}</Caption>
              <Caption color="white">∙</Caption>
              <Caption color="white">
                {intl.formatMessage(
                  { id: "{number} km to city centre" },
                  {
                    number: getSingleDecimal(
                      hotel.location.distanceToCentre / 1000
                    ),
                  }
                )}
              </Caption>
            </div>
          </div>
          <ToggleSidePeek hotelId={hotel.operaId} />
        </div>
      </div>
    </header>
  )
}