import Image from "@/components/Image"

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

import type { ApiImage } from "@/types/hotel"

interface SidePeekImagesProps {
  images: ApiImage[]
}

export default function SidePeekImages({ images }: SidePeekImagesProps) {
  const showMultipleImages = images.length > 2
  const imageWidth = showMultipleImages ? 240 : 496
  const sizesString = showMultipleImages
    ? "(min-width: 1367px) 240px, 50vw"
    : "(min-width: 1367px) 496px, 100vw"

  return (
    <div className={styles.sidePeekImages}>
      {images.map(({ metaData, imageSizes }) => (
        <Image
          key={imageSizes.tiny}
          src={imageSizes.tiny}
          alt={metaData.altText}
          height={240}
          width={imageWidth}
          sizes={sizesString}
          className={styles.image}
        />
      ))}
    </div>
  )
}
