"use client"
import { useIntl } from "react-intl"

import useSidePeekStore from "@/stores/sidepeek"

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

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

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

export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) {
  const intl = useIntl()
  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)

  return (
    <Button
      onClick={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
      theme="base"
      size="small"
      variant="icon"
      intent="textInverted"
      wrapping
      className={styles.toggle}
    >
      {intl.formatMessage({ id: "See hotel details" })}
      <ChevronRight height="14" color="white" />
    </Button>
  )
}