// placeholder.jsx — Subtly striped placeholder with a mono label.
// No hand-drawn SVG imagery. Just tone + type.

function Placeholder({ label = "image", tint, bg, ratio = "16/9", style = {}, kind = "stripe" }) {
  const fg = tint || "rgba(0,0,0,0.28)";
  const bgColor = bg || "rgba(0,0,0,0.04)";

  const stripe = `repeating-linear-gradient(
    135deg,
    ${bgColor} 0px,
    ${bgColor} 14px,
    color-mix(in oklch, ${fg} 14%, transparent) 14px,
    color-mix(in oklch, ${fg} 14%, transparent) 15px
  )`;

  const dots = `radial-gradient(
    color-mix(in oklch, ${fg} 26%, transparent) 1px,
    transparent 1.5px
  )`;

  const bgImage = kind === "dots" ? dots : stripe;
  const bgSize = kind === "dots" ? "18px 18px" : "auto";

  return (
    <div
      className="ph"
      style={{
        position: "relative",
        aspectRatio: ratio,
        background: bgColor,
        backgroundImage: bgImage,
        backgroundSize: bgSize,
        overflow: "hidden",
        ...style,
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "flex-start",
          padding: "14px",
        }}
      >
        <span
          style={{
            fontFamily:
              "ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace",
            fontSize: "10.5px",
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: fg,
            background: "color-mix(in oklch, " + bgColor + " 85%, transparent)",
            padding: "3px 7px",
            borderRadius: "2px",
            backdropFilter: "blur(6px)",
          }}
        >
          {label}
        </span>
      </div>
    </div>
  );
}

window.Placeholder = Placeholder;