"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 { trackOpenSidePeekEvent } from "@/utils/tracking"

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

import { SidePeekEnum } from "@/types/sidepeek"
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}
        onPress={() => {
          trackOpenSidePeekEvent({
            name: SidePeekEnum.bookedRoomDetails,
            hotelId: booking.hotelId,
            includePathname: true,
          })
        }}
      >
        <MaterialIcon icon="pan_zoom" color="CurrentColor" />
      </ButtonRAC>
      <BookedRoomSidePeek hotelRoom={booking.room} room={booking} user={user} />
    </DialogTrigger>
  )
}