"use client"
import { useMyStayStore } from "@/stores/my-stay"

import Image from "@/components/Image"

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

export default function Img() {
  const { room, roomName } = useMyStayStore((state) => ({
    room: state.bookedRoom.room,
    roomName: state.bookedRoom.roomName,
  }))

  if (!room) {
    return null
  }

  const image = room.images?.[0]

  return (
    <div className={styles.imageContainer}>
      <Image
        alt={roomName}
        className={styles.image}
        height={960}
        src={image?.imageSizes.small ?? ""}
        width={640}
      />
    </div>
  )
}
