"use client"

import { useIntl } from "react-intl"

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

import useSidePeekStore from "@/stores/sidepeek"

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
      onPress={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
      size="Small"
      variant="Secondary"
      color="Inverted"
      wrapping
      typography="Body/Paragraph/mdBold"
    >
      {intl.formatMessage({
        defaultMessage: "See hotel details",
      })}
      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
    </Button>
  )
}