"use client"

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

import useSidePeekStore from "@/stores/sidepeek"

import Button from "@/components/TempDesignSystem/Button"

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

import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"

export default function ToggleSidePeek({
  hotelId,
  roomTypeCode,
  user,
  confirmationNumber,
}: ToggleSidePeekProps) {
  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)

  return (
    <Button
      onClick={() =>
        openSidePeek({
          key: SidePeekEnum.bookedRoomDetails,
          hotelId,
          roomTypeCode,
          user,
          confirmationNumber,
        })
      }
      size="small"
      variant="icon"
      intent="text"
      wrapping
    >
      <div className={styles.iconContainer}>
        <MaterialIcon icon="pan_zoom" color="CurrentColor" />
      </div>
    </Button>
  )
}