import { SKY, MUTE, FONT_MONO } from "../theme";
import usePhoto from "../hooks/usePhoto";

/*
 * De foto bij een brief.
 *   photo = { id, alt, width, height } → wordt opgehaald bij de mediaserver (met sessietoken, zie
 *            usePhoto) en als blob-URL getoond
 *   src   = een kant-en-klare URL → voor het voorbeeld in de schrijfdialoog, dat nog nergens staat
 *
 * Zolang hij laadt houdt een vlak in de juiste verhouding de plek vast, zodat de brief niet verspringt.
 */
export default function Photo({ photo = null, src = null, alt = "" }) {
  const loaded = usePhoto(src ? null : photo?.id);
  const url = src ?? loaded.url;
  const ratio = photo?.width && photo?.height ? `${photo.width} / ${photo.height}` : "3 / 2";

  if (!url)
    return (
      <div
        role="img"
        aria-label={loaded.failed ? "De foto kon niet geladen worden" : "Foto wordt geladen"}
        style={{ aspectRatio: ratio, background: SKY, display: "grid", placeItems: "center" }}
      >
        <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: MUTE }}>
          {loaded.failed ? "foto kon niet geladen worden" : "foto laden…"}
        </span>
      </div>
    );

  return <img src={url} alt={alt || photo?.alt || ""} style={{ width: "100%", display: "block" }} />;
}