web/components/ImageGallery/index.tsx

"use client"

import { memo, useState } from "react"
import { useIntl } from "react-intl"

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

import Caption from "../TempDesignSystem/Text/Caption"

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

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

function ImageGallery({
  images,
  title,
  fill,
  height = 280,
}: ImageGalleryProps) {
  const intl = useIntl()
  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
  const [imageError, setImageError] = useState(false)
  const imageProps = fill ? { fill } : { height, width: height * 1.5 }

  if (!images || images.length === 0 || imageError) {
    return <div className={styles.imagePlaceholder} />
  }

  return (
    <>
      <div
        className={styles.triggerArea}
        role="button"
        onClick={() => setLightboxIsOpen(true)}
        aria-label={intl.formatMessage({ id: "Open image gallery" })}
      >
        <Image
          className={styles.image}
          src={images[0].imageSizes.medium}
          alt={images[0].metaData.altText}
          onError={() => setImageError(true)}
          {...imageProps}
        />
        <div className={styles.imageCount}>
          <GalleryIcon color="white" />
          <Caption color="white" type="label">
            {images.length}
          </Caption>
        </div>
      </div>
      <Lightbox
        images={images}
        dialogTitle={title}
        isOpen={lightboxIsOpen}
        onClose={() => setLightboxIsOpen(false)}
      />
    </>
  )
}

export default memo(ImageGallery)