// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useRef, type ComponentProps } from "react";
export type ImageZoomProps = Omit<ComponentProps<"div">, "children"> & {
  src: string;
  alt: string;
  zoomSrc?: string;
};
export function ImageZoom({
  src,
  alt,
  zoomSrc,
  className = "",
  ...props
}: ImageZoomProps) {
  const dialog = useRef<HTMLDialogElement>(null);
  const trigger = useRef<HTMLButtonElement>(null);
  return (
    <div className={`ynr-image-zoom ${className}`} {...props}>
      <button
        ref={trigger}
        className="ynr-image-zoom-trigger"
        type="button"
        aria-label={`Enlarge ${alt}`}
        onClick={() => {
          trigger.current?.focus();
          dialog.current?.showModal();
        }}
      >
        <img src={src} alt={alt} />
      </button>
      <dialog
        ref={dialog}
        onClose={() => trigger.current?.focus()}
        aria-label={alt}
        onClick={(event) => {
          if (event.target === event.currentTarget) event.currentTarget.close();
        }}
      >
        <button
          type="button"
          autoFocus
          aria-label="Close image"
          onClick={() => dialog.current?.close()}
        >
          ×
        </button>
        <img src={zoomSrc ?? src} alt={alt} />
      </dialog>
    </div>
  );
}