// Rôle : affiche la collection d'un outil Images dans la galerie de la visionneuse.
import { useEffect, useRef } from "react";

export function ImageGallery({ images, activeIndex, focusIndex = -1, onSelect, textContent = {} }) {
  const galleryRef = useRef(null);

  useEffect(() => {
    if (focusIndex < 0) return;
    const frame = window.requestAnimationFrame(() => {
      galleryRef.current?.querySelector(`[data-image-index="${focusIndex}"]`)?.focus();
    });
    return () => window.cancelAnimationFrame(frame);
  }, [focusIndex]);

  return (
    <div ref={galleryRef} className="image-viewer-gallery themed-scrollbar">
      {images.map((image, index) => {
        const position = `${index + 1} / ${images.length}`;
        const label = image.label || `${textContent.imageAlt || "Image"} ${index + 1}`;
        return (
          <button
            className={`image-viewer-gallery-item nds-card ${index === activeIndex ? "is-active" : ""}`}
            data-variant="interactive"
            data-image-index={index}
            type="button"
            key={image.id || `${image.dataUrl}-${index}`}
            onClick={() => onSelect(index)}
            aria-label={`${textContent.galleryImageAriaLabel || "Afficher en grand"} : ${label}`}
          >
            <span className="image-viewer-gallery-frame">
              <img src={image.dataUrl} alt="" loading="lazy" decoding="async" />
            </span>
            <span className="image-viewer-gallery-caption">
              <strong>{label}</strong>
              <small>{position}</small>
            </span>
          </button>
        );
      })}
    </div>
  );
}