import { useIntl } from "react-intl"

import SidePeek from "@scandic-hotels/design-system/SidePeek"

import { SidePeekEnum } from "../../stores/sidepeek"
import { RoomSidePeekContent } from "./RoomSidePeekContent"

import type { Room } from "@scandic-hotels/trpc/types/hotel"

export type RoomSidePeekProps = {
  room: Room
  activeSidePeek: SidePeekEnum | null
  close: () => void
}

export default function RoomSidePeek({
  room,
  activeSidePeek,
  close,
}: RoomSidePeekProps) {
  const intl = useIntl()

  return (
    <SidePeek
      title={room.name}
      isOpen={activeSidePeek === SidePeekEnum.roomDetails}
      handleClose={close}
      closeLabel={intl.formatMessage({
        defaultMessage: "Close",
      })}
    >
      <RoomSidePeekContent room={room} />
    </SidePeek>
  )
}