web/apps/scandic-web/components/ImageGallery/index.tsx

"use client"

import { cx } from "class-variance-authority"
import { memo, useState } from "react"
import { Button } from "react-aria-components"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox"

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

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

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

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

  const firstImage = images[0]

  return (
    <>
      <div className={cx(styles.wrapper, { [styles.fill]: fill })}>
        <Image
          className={styles.image}
          src={firstImage.src}
          alt={firstImage.alt}
          onError={() => setImageError(true)}
          {...imageProps}
        />
        <Typography variant={"Body/Supporting text (caption)/smRegular"}>
          <span className={styles.imageCount}>
            <MaterialIcon icon="filter" color="Icon/Inverted" />
            <span>{images.length}</span>
          </span>
        </Typography>
        <Button
          className={styles.triggerArea}
          onPress={() => setIsOpen(true)}
          aria-label={intl.formatMessage({
            defaultMessage: "Open image gallery",
          })}
        />
      </div>
      {isOpen ? (
        <Lightbox
          images={images}
          dialogTitle={title}
          onClose={() => setIsOpen(false)}
          hideLabel={hideLabel}
        />
      ) : null}
    </>
  )
}

export default memo(ImageGallery)