veza/apps/web/src/components/ui/ImageViewerModal.tsx

import React from 'react';
import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';

/**
 * ImageViewerModalProps - Propriétés du composant ImageViewerModal
 *
 * @interface ImageViewerModalProps
 */
interface ImageViewerModalProps {
  /**
   * URL de l'image à afficher
   */
  src: string;

  /**
   * Texte alternatif de l'image
   */
  alt?: string;

  /**
   * Fonction appelée pour fermer le visualiseur
   */
  onClose: () => void;

  /**
   * Fonction appelée pour passer à l'image suivante
   */
  onNext?: () => void;

  /**
   * Fonction appelée pour passer à l'image précédente
   */
  onPrev?: () => void;

  /**
   * Si `true`, affiche le bouton suivant
   */
  hasNext?: boolean;

  /**
   * Si `true`, affiche le bouton précédent
   */
  hasPrev?: boolean;
}

/**
 * ImageViewerModal - Composant de visualisation d'image en plein écran
 *
 * Composant modal pour afficher une image en plein écran avec :
 * - Navigation entre images (précédent/suivant)
 * - Téléchargement de l'image
 * - Fermeture avec bouton ou Escape
 * - Fond sombre avec backdrop blur
 *
 * @example
 * ```tsx
 * // Visualiseur simple
 * <ImageViewerModal
 *   src={imageUrl}
 *   alt="Description"
 *   onClose={() => setShowViewer(false)}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Avec navigation
 * <ImageViewerModal
 *   src={images[currentIndex]}
 *   alt={`Image ${currentIndex + 1}`}
 *   onClose={() => setShowViewer(false)}
 *   onNext={() => setCurrentIndex(i => i + 1)}
 *   onPrev={() => setCurrentIndex(i => i - 1)}
 *   hasNext={currentIndex < images.length - 1}
 *   hasPrev={currentIndex > 0}
 * />
 * ```
 *
 * @component
 * @param {ImageViewerModalProps} props - Propriétés du composant
 * @returns {JSX.Element} Modal plein écran avec image et contrôles
 */

export const ImageViewerModal: React.FC<ImageViewerModalProps> = ({
  src,
  alt,
  onClose,
  onNext,
  onPrev,
  hasNext,
  hasPrev,
}) => {
  return (
    <div className="fixed inset-0 z-[200] bg-black/95 backdrop-blur-xl flex items-center justify-center animate-fadeIn">
      {/* Toolbar */}
      <div className="absolute top-0 left-0 right-0 p-4 flex justify-between items-center z-10 bg-gradient-to-b from-black/50 to-transparent">
        <span className="text-white/50 text-sm font-mono">
          {alt || 'Image Preview'}
        </span>
        <div className="flex gap-4">
          <a
            href={src}
            download
            className="p-2 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors"
            title="Download"
          >
            <Download className="w-5 h-5" />
          </a>
          <button
            onClick={onClose}
            className="p-2 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors"
            title="Close"
          >
            <X className="w-5 h-5" />
          </button>
        </div>
      </div>

      {/* Navigation */}
      {hasPrev && (
        <button
          onClick={onPrev}
          className="absolute left-4 p-4 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors z-10"
        >
          <ChevronLeft className="w-8 h-8" />
        </button>
      )}
      {hasNext && (
        <button
          onClick={onNext}
          className="absolute right-4 p-4 bg-white/10 rounded-full hover:bg-white/20 text-white transition-colors z-10"
        >
          <ChevronRight className="w-8 h-8" />
        </button>
      )}

      {/* Image */}
      <div className="w-full h-full p-4 md:p-10 flex items-center justify-center">
        <img
          src={src}
          alt={alt}
          className="max-w-full max-h-full object-contain shadow-2xl rounded-lg"
        />
      </div>
    </div>
  );
};