web/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/index.tsx

"use client"
import { useIntl } from "react-intl"

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

import { useMyStayStore } from "@/stores/my-stay"

import RoomDetailsSidePeek from "../RoomDetailsSidePeek"

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

import type { SafeUser } from "@/types/user"

export default function Header({ user }: { user: SafeUser }) {
  const intl = useIntl()

  const { confirmationNumber, roomNumber } = useMyStayStore((state) => ({
    confirmationNumber: state.bookedRoom.confirmationNumber,
    roomNumber: state.bookedRoom.roomNumber,
  }))

  return (
    <div className={styles.header}>
      <div className={styles.container}>
        <div className={styles.chip}>
          <Typography variant="Tag/sm">
            <span>
              {intl.formatMessage(
                {
                  id: "booking.roomIndex",
                  defaultMessage: "Room {roomIndex}",
                },
                {
                  roomIndex: roomNumber,
                }
              )}
            </span>
          </Typography>
        </div>
        <div className={styles.reference}>
          <Typography variant="Body/Paragraph/mdBold">
            <span>
              {intl.formatMessage({
                id: "common.bookingNumber",
                defaultMessage: "Booking number",
              })}
              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
              {":"}
            </span>
          </Typography>
          <Typography variant="Body/Paragraph/mdRegular">
            <span>{confirmationNumber}</span>
          </Typography>
        </div>
      </div>
      <div className={styles.sidePeek}>
        <RoomDetailsSidePeek user={user} />
      </div>
    </div>
  )
}