"use client"

import { useIntl } from "react-intl"

import { useEnterDetailsStore } from "@/stores/enter-details"

import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"

import { SidePeekEnum } from "@/types/components/enterDetails/sidePeek"

export default function ToggleSidePeek() {
  const intl = useIntl()
  const openSidePeek = useEnterDetailsStore((state) => state.openSidePeek)

  return (
    <Button
      onClick={() => {
        openSidePeek(SidePeekEnum.hotelDetails)
      }}
      theme="base"
      size="small"
      variant="icon"
      intent="text"
      wrapping
    >
      {intl.formatMessage({ id: "See room details" })}{" "}
      <ChevronRightSmallIcon
        color="baseButtonTextOnFillNormal"
        height={20}
        width={20}
      />
    </Button>
  )
}