/**
 * ── APPRENTISSAGE ────────────────────────────────────────────────────────────
 * POURQUOI UNE BALISE <img> ET PAS <Image> DE NEXT ICI
 *
 * `next/image` sait normalement produire un `srcSet` — la liste des versions
 * d'une même image, dans laquelle le navigateur pioche celle qui correspond à
 * son écran. Mais cette fonction repose sur l'optimiseur d'images de Next, qui
 * est un service Node : indisponible sur un mutualisé OVH. On a donc mis
 * `images: { unoptimized: true }`, et `<Image>` se contente alors de servir le
 * fichier tel quel.
 *
 * Conséquence mesurée sur ce projet : un téléphone de 390 px téléchargeait la
 * photo de 1600 px (142 Ko) de la page d'accueil. Lighthouse mobile plafonnait
 * à 82 en performance, à cause du LCP.
 *
 * La parade : générer les variantes à l'avance (voir
 * `_source/convertir-assets.js`) et les déclarer soi-même en `srcSet`.
 * Ce composant ne fait que ça.
 *
 * `width` et `height` restent obligatoires : ils fixent le rapport d'image, le
 * navigateur réserve la place avant le chargement, et il n'y a aucun saut de
 * mise en page (métrique CLS).
 * ─────────────────────────────────────────────────────────────────────────────
 */
export function Photo({
  /** Chemin sans le suffixe de largeur, ex. "/photos/seance-de-travail" */
  base,
  alt,
  largeurs,
  /** Dimensions de la plus grande variante — servent au rapport d'image. */
  largeur,
  hauteur,
  /** Indique au navigateur la place occupée à l'écran, AVANT le calcul du CSS. */
  sizes,
  className = "",
  /** À réserver à une image visible sans défiler. Sinon : chargement différé. */
  prioritaire = false,
}: {
  base: string;
  alt: string;
  largeurs: number[];
  largeur: number;
  hauteur: number;
  sizes: string;
  className?: string;
  prioritaire?: boolean;
}) {
  const srcSet = largeurs.map((l) => `${base}-${l}.webp ${l}w`).join(", ");

  return (
    // eslint-disable-next-line @next/next/no-img-element -- voir l'explication en tête de fichier
    <img
      src={`${base}-${largeurs[largeurs.length - 1]}.webp`}
      srcSet={srcSet}
      sizes={sizes}
      alt={alt}
      width={largeur}
      height={hauteur}
      loading={prioritaire ? "eager" : "lazy"}
      fetchPriority={prioritaire ? "high" : undefined}
      decoding="async"
      className={className}
    />
  );
}