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

"use client"

import { DialogTrigger } from "react-aria-components"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"

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

import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"

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

interface RoomDetailsSidePeekProps {
  user: SafeUser
}

export default function RoomDetailsSidePeek({
  user,
}: RoomDetailsSidePeekProps) {
  const intl = useIntl()
  const bookedRoom = useMyStayStore((state) => state.bookedRoom)
  return (
    <DialogTrigger>
      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
        {intl.formatMessage({ defaultMessage: "See room details" })}
        <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
      </Button>
      <BookedRoomSidePeek
        hotelRoom={bookedRoom.room}
        room={bookedRoom}
        user={user}
      />
    </DialogTrigger>
  )
}