"use client"

import useSidePeekStore from "@/stores/sidepeek"

import { ChevronRightIcon } from "@/components/Icons"
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}
      <ChevronRightIcon
        color="baseButtonTextOnFillNormal"
        height={20}
        width={20}
      />
    </Button>
  )
}