"use client"

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

import useSidePeekStore from "@/stores/sidepeek"

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

export default function ReadMore({
  label,
  hotelId,
  showCTA,
  sidePeekKey,
}: ReadMoreProps) {
  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
  return (
    <Button
      onPress={() => {
        openSidePeek({ key: sidePeekKey, hotelId, showCTA })
      }}
      variant="Text"
      typography="Body/Paragraph/mdBold"
    >
      {label}
      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
    </Button>
  )
}