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.map((image) => ({
        url: image.imageSizes.small,
        alt: image.metaData.altText,
        title: image.metaData.title,
      }))}
      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>
  )
}