// MediaImg.jsx — production replacement for <image-slot> in non-design environments.
// Renders a normal <img> with object-fit: cover, plus a graceful "image missing"
// stub so the layout doesn't collapse if a file isn't there yet.

const { useState: useMS } = React;

function MediaImg({ src, alt = "", fit = "cover", position = "50% 50%", style = {} }) {
  const [failed, setFailed] = useMS(false);

  if (failed) {
    return (
      <div style={{
        width: "100%", height: "100%",
        background:
          "repeating-linear-gradient(45deg, #0c0c0c 0 10px, #141414 10px 20px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "var(--mute)",
        fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em",
        textTransform: "uppercase", textAlign: "center", padding: 24,
        ...style,
      }}>
        Missing · {src}
      </div>
    );
  }

  return (
    <img
      src={src}
      alt={alt}
      onError={() => setFailed(true)}
      style={{
        width: "100%",
        height: "100%",
        objectFit: fit,
        objectPosition: position,
        display: "block",
        ...style,
      }}
    />
  );
}

window.MediaImg = MediaImg;