aramesh-backend/frontend/src/components/Lightbox.tsx

import React, { useCallback, useEffect } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { XIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'

type Props = {
  images: string[]
  index: number | null
  onClose: () => void
  onChange: (index: number) => void
}

export function Lightbox({ images, index, onClose, onChange }: Props) {
  const isOpen = index !== null

  const next = useCallback(() => {
    if (index === null) return
    onChange((index + 1) % images.length)
  }, [index, images.length, onChange])

  const prev = useCallback(() => {
    if (index === null) return
    onChange((index - 1 + images.length) % images.length)
  }, [index, images.length, onChange])

  useEffect(() => {
    if (!isOpen) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
      if (e.key === 'ArrowRight') prev()
      if (e.key === 'ArrowLeft') next()
    }
    window.addEventListener('keydown', onKey)
    document.body.style.overflow = 'hidden'
    return () => {
      window.removeEventListener('keydown', onKey)
      document.body.style.overflow = ''
    }
  }, [isOpen, onClose, next, prev])

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          role="dialog"
          aria-modal="true"
          className="fixed inset-0 z-[90] flex items-center justify-center p-5 md:p-10"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
        >
          <div
            className="absolute inset-0 bg-ink/90 backdrop-blur-md"
            onClick={onClose}
            aria-hidden="true"
          />

          <button
            type="button"
            onClick={onClose}
            className="absolute left-6 top-6 z-10 flex h-12 w-12 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper md:left-10 md:top-10"
          >
            <XIcon className="h-5 w-5" />
          </button>

          <motion.img
            key={index}
            src={images[index as number]}
            alt=""
            className="relative max-h-[80vh] w-auto max-w-full object-contain"
            initial={{ opacity: 0, scale: 0.96 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.96 }}
            transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
          />

          <div className="absolute bottom-6 z-10 flex items-center gap-4 md:bottom-10">
            <button
              type="button"
              onClick={prev}
              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper"
            >
              <ChevronRightIcon className="h-5 w-5" />
            </button>
            <span className="text-sm font-light text-ivory/70" dir="ltr">
              {(index as number) + 1} / {images.length}
            </span>
            <button
              type="button"
              onClick={next}
              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper"
            >
              <ChevronLeftIcon className="h-5 w-5" />
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}