/**
 * @file ImageLightbox.tsx
 * @description One image shown full size over the whole page; a click or
 * Escape closes it. Rendered into `document.body`, so no pane, its stacking
 * layer or a header drawn over a pane can cover it — opened from inside a
 * pane's Chat view, a `fixed` overlay would otherwise stay in that pane's
 * layer, under anything stacked above it.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect } from "react";
import { createPortal } from "react-dom";

export function ImageLightbox({
  src,
  alt,
  onClose,
}: {
  src: string;
  alt: string;
  onClose: () => void;
}) {
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);
  return createPortal(
    <div
      role="dialog"
      aria-label={alt}
      data-testid="image-lightbox"
      onClick={onClose}
      className="fixed inset-0 z-[200] flex cursor-zoom-out items-center justify-center bg-black/60 p-8"
    >
      <img
        src={src}
        alt={alt}
        className="max-h-full max-w-full rounded-lg object-contain shadow-2xl"
      />
    </div>,
    document.body
  );
}