"use client"

import { useIntl } from "react-intl"

import useSidePeekStore from "@/stores/sidepeek"

import { ChevronRightSmallIcon } from "@/components/Icons"
import ImageGallery from "@/components/ImageGallery"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import type { RoomCardProps } from "@/types/components/hotelPage/room"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"

export function RoomCard({ hotelId, room }: RoomCardProps) {
  const { images, name, roomSize, occupancy } = room
  const intl = useIntl()
  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)

  const size =
    roomSize?.min === roomSize?.max
      ? `${roomSize.min} m²`
      : `${roomSize.min} - ${roomSize.max} m²`

  return (
    <article className={styles.roomCard}>
      <div className={styles.imageContainer}>
        <ImageGallery
          images={images}
          title={intl.formatMessage({ id: "Image gallery" }, { name })}
          height={200}
        />
      </div>
      <div className={styles.content}>
        <div className={styles.innerContent}>
          <Subtitle
            textTransform="capitalize"
            textAlign="center"
            type="one"
            color="black"
          >
            {name}
          </Subtitle>
          <Body color="grey">
            {intl.formatMessage(
              { id: "hotelPages.rooms.roomCard.persons" },
              { size, totalOccupancy: occupancy.total }
            )}
          </Body>
        </div>
        <Button
          intent="text"
          type="button"
          size="medium"
          theme="base"
          onClick={() =>
            openSidePeek({
              key: SidePeekEnum.roomDetails,
              hotelId,
              roomTypeCode: room.roomTypes[0].code,
            })
          }
        >
          {intl.formatMessage({ id: "See room details" })}
          <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
        </Button>
      </div>
    </article>
  )
}
