web/components/HotelReservation/SelectRate/ImageGallery/index.tsx

import { GalleryIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

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

import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"

export default function ImageGallery({ images, title }: ImageGalleryProps) {
  return (
    <Lightbox images={images} dialogTitle={title}>
      <div className={styles.triggerArea} id="lightboxTrigger">
        <Image
          src={images[0].imageSizes.medium}
          alt={images[0].metaData.altText}
          fill
        />
        <div className={styles.galleryIcon}>
          <GalleryIcon color="white" />
          <Footnote color="white" type="label">
            {images.length}
          </Footnote>
        </div>
      </div>
    </Lightbox>
  )
}