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

import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"

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: { hotel },
}: HotelHeaderProps) {
  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"
              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>
          <ToggleSidePeek hotelId={hotel.operaId} />
        </div>
      </div>
    </header>
  )
}