import { mediaUrl } from "@/lib/media/urls";
import type { MediaInfo } from "./types";

/** Image served via the media route; alt text comes from the library. Missing/private assets render nothing. */
export function MediaImage({ id, media, className, priority = false }: { id: string | null | undefined; media: MediaInfo; className?: string; priority?: boolean }) {
  if (!id) return null;
  const m = media.get(id);
  if (!m) return null;
  return (
    // eslint-disable-next-line @next/next/no-img-element -- served by our own authorised media route
    <img
      src={mediaUrl(m.id)}
      alt={m.altText ?? ""}
      width={m.width ?? undefined}
      height={m.height ?? undefined}
      loading={priority ? "eager" : "lazy"}
      decoding="async"
      className={className}
    />
  );
}