"use client";

import { useState } from "react";

/* Image de réalisation avec repli automatique : si le fichier est
   absent, l'image se masque et le placeholder CSS (dégradé + initiales
   posées en data-initials sur la <figure>) reste visible. */
export default function MediaImage({
  src,
  alt,
  width,
  height,
}: {
  src: string;
  alt: string;
  width: number;
  height: number;
}) {
  const [broken, setBroken] = useState(false);

  return (
    // eslint-disable-next-line @next/next/no-img-element -- export statique, repli onError requis
    <img
      src={src}
      alt={alt}
      width={width}
      height={height}
      loading="lazy"
      className={broken ? "is-broken" : undefined}
      onError={() => setBroken(true)}
    />
  );
}