import React, { useEffect } from "react";

const Lightbox = ({ imageUrl, alt, onClose }) => {
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === "Escape") {
        onClose();
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [onClose]);

  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <div className="lightbox-backdrop" onClick={handleBackdropClick}>
      <div className="lightbox-content">
        <button className="lightbox-close" onClick={onClose}>
          <i className="fa-solid fa-times"></i>
        </button>
        <img src={imageUrl} alt={alt || "Image agrandie"} />
      </div>
    </div>
  );
};

export default Lightbox;
