import { useEffect } from "react";
import "../../styles/ImageModal.css";

export default function ImageModal({ imageUrl, itemName, onClose }) {
  useEffect(() => {
    // Close modal on Escape key
    const handleEscape = (e) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [onClose]);

  if (!imageUrl) return null;

  return (
    <div className="image-modal-overlay" onClick={onClose}>
      <div className="image-modal-content" onClick={onClose}>
        <img src={imageUrl} alt={itemName} className="image-modal-img" />
        <p className="image-modal-caption">{itemName}</p>
      </div>
    </div>
  );
}