"use client"
import Image from "@scandic-hotels/design-system/Image"
import ImageFallback from "@scandic-hotels/design-system/ImageFallback"

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

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?.src ? (
        <Image
          alt={roomName}
          className={styles.image}
          height={960}
          src={image.src}
          width={640}
        />
      ) : (
        <ImageFallback height="640px" />
      )}
    </div>
  )
}