"use client"

import { useIntl } from "react-intl"

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

import useSidePeekStore from "@/stores/sidepeek"

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

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

export default function ToggleSidePeek({
  hotelId,
  roomTypeCode,
  intent = "textInverted",
  title,
}: ToggleSidePeekProps) {
  const intl = useIntl()
  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)

  return (
    <Button
      onClick={() =>
        openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
      }
      theme="base"
      size="small"
      variant="icon"
      intent={intent}
      wrapping
    >
      {title
        ? title
        : intl.formatMessage({
            defaultMessage: "See room details",
          })}
      <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
    </Button>
  )
}
