web/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx

"use client"

import { useIntl } from "react-intl"

import useSidePeekStore, {
  SidePeekEnum,
} from "@scandic-hotels/booking-flow/stores/sidepeek"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import { trackOpenSidePeekEvent } from "@/utils/tracking"

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

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

  return (
    <Button
      onPress={() => {
        openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
        trackOpenSidePeekEvent({
          name: SidePeekEnum.roomDetails,
          hotelId,
          roomTypeCode,
          includePathname: true,
        })
      }}
      size="Small"
      variant="Text"
      wrapping
      typography="Body/Paragraph/mdBold"
    >
      {title ||
        intl.formatMessage({
          defaultMessage: "See room details",
        })}
      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
    </Button>
  )
}