"use client"
import { motion } from "motion/react"

import Image from "../../Image"
import { LightboxImage } from ".."
import styles from "./gallery.module.css"
import { useIntl } from "react-intl"
import { cx } from "class-variance-authority"
import { Button as ButtonRAC } from "react-aria-components"
import { memo } from "react"

interface ThumbnailImage {
  image: LightboxImage
  index: number
  onSelect: (image: LightboxImage) => void
  isMainImage?: boolean
  className?: string
}
export const ThumbnailImage = memo(function ThumbnailImage({
  image,
  index,
  onSelect,
  isMainImage = false,
  className,
}: ThumbnailImage) {
  const intl = useIntl()
  return (
    <motion.div
      key={image.src}
      className={styles.thumbnailContainer}
      initial={{ opacity: 0, x: 50 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -50 }}
      transition={{ duration: 0.2, delay: index * 0.05 }}
    >
      <ButtonRAC
        className={styles.imageButton}
        onPress={() => onSelect(image)}
        aria-label={intl.formatMessage({
          id: "lightbox.openImage",
          defaultMessage: "Open image",
        })}
      >
        <Image
          src={image.src}
          alt={image.alt}
          fill
          sizes="200px"
          className={cx(styles.image, className, {
            [styles.notActiveImage]: !isMainImage,
            [styles.activeImage]: isMainImage,
          })}
        />
      </ButtonRAC>
    </motion.div>
  )
})