fix: add hotel header to enter details flow

components/HotelReservation/EnterDetails/Header/index.tsx

@@ -0,0 +1,53 @@
+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
+  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.titleContainer}>
+          <Title as="h1" level="h1" color="white">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="white">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <Caption color="white">∙</Caption>
+            <Caption color="white">
+              {intl.formatMessage(
+                { id: "Distance in km to city centre" },
+                {
+                  number: getSingleDecimal(
+                    hotel.location.distanceToCentre / 1000
+                  ),
+                }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <ToggleSidePeek hotelId={hotel.operaId} />
+      </div>
+    </header>
+  )
+}