"use client"

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

import useSidePeekStore from "@/stores/sidepeek"

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

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

import type { ReadMoreProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"

export default function ReadMore({ label, hotelId, showCTA }: ReadMoreProps) {
  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
  return (
    <Button
      onPress={() => {
        openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId, showCTA })
      }}
      intent="text"
      theme="base"
      wrapping
      className={styles.detailsButton}
    >
      {label}
      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
    </Button>
  )
}
