import { useEffect } from 'react'

/**
 * Full-screen lightbox. Click overlay or press Escape to close.
 */
export default function ImageLightbox({ src, alt = '', onClose }) {
  useEffect(() => {
    if (!src) return
    const handler = (e) => {
      if (e.key === 'Escape') onClose?.()
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [src, onClose])

  if (!src) return null

  return (
    <div
      className="image-lightbox-overlay"
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-label="View full image"
    >
      <img
        src={src}
        alt={alt}
        className="image-lightbox-img"
        onClick={(e) => e.stopPropagation()}
      />
    </div>
  )
}