"use client"
import { Button as ButtonRAC, DialogTrigger } from "react-aria-components"

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

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

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

import type { Room as MyStayRoom } from "@/types/stores/my-stay"
import type { SafeUser } from "@/types/user"

interface RoomDetailsSidePeekProps {
  booking: MyStayRoom
  user: SafeUser
}

export default function RoomDetailsSidePeek({
  booking,
  user,
}: RoomDetailsSidePeekProps) {
  return (
    <DialogTrigger>
      <ButtonRAC className={styles.trigger}>
        <MaterialIcon icon="pan_zoom" color="CurrentColor" />
      </ButtonRAC>
      <BookedRoomSidePeek hotelRoom={booking.room} room={booking} user={user} />
    </DialogTrigger>
  )
}