feat(SW-842): Added lightbox to roomcard

components/HotelReservation/SelectRate/ImageGallery/index.tsx

@@ -1,3 +1,7 @@
+"use client"
+
+import { useState } from "react"
+
 import { GalleryIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox"
@@ -8,12 +12,19 @@ import styles from "./imageGallery.module.css"
 import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
 
 export default function ImageGallery({ images, title }: ImageGalleryProps) {
-  if (!images || images.length === 0)
+  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+
+  if (!images || images.length === 0) {
     return <div className={styles.imagePlaceholder} />
+  }
 
   return (
-    <Lightbox images={images} dialogTitle={title}>
-      <div className={styles.triggerArea} id="lightboxTrigger">
+    <>
+      <div
+        className={styles.triggerArea}
+        role="button"
+        onClick={() => setLightboxIsOpen(true)}
+      >
         <Image
           src={images[0].imageSizes.medium}
           alt={images[0].metaData.altText}
@@ -26,6 +37,12 @@ export default function ImageGallery({ images, title }: ImageGalleryProps) {
           </Footnote>
         </div>
       </div>
-    </Lightbox>
+      <Lightbox
+        images={images}
+        dialogTitle={title}
+        isOpen={lightboxIsOpen}
+        onClose={() => setLightboxIsOpen(false)}
+      />
+    </>
   )
 }