"use client"

import { ErrorBoundary } from "../../../../ErrorBoundary/ErrorBoundary"
import NoAvailabilityAlert from "../NoAvailabilityAlert"
import { AvailableRoomsCount } from "./AvailableRoomsCount"
import { RoomPackageFilter } from "./RoomPackageFilter"

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

export function RoomsHeader({ roomIndex }: { roomIndex: number }) {
  return (
    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
    <ErrorBoundary fallback={<div>Unable to render rooms header</div>}>
      <InnerRoomsHeader roomIndex={roomIndex} />
    </ErrorBoundary>
  )
}

function InnerRoomsHeader({ roomIndex }: { roomIndex: number }) {
  return (
    <div className={styles.container}>
      <AvailableRoomsCount
        roomIndex={roomIndex}
        className={styles.availableRoomsCount}
      />
      <NoAvailabilityAlert
        roomIndex={roomIndex}
        className={styles.noAvailabilityAlert}
      />
      <div className={styles.filters}>
        <RoomPackageFilter roomIndex={roomIndex} />
      </div>
    </div>
  )
}