/* global React */

// ── Tag ───────────────────────────────────────────────────────
// Dashed outlined micro-label for stack items etc.
function Tag({ children, ...rest }) {
  return <span className="tag" {...rest}>{children}</span>;
}

// ── Stamp ─────────────────────────────────────────────────────
// Solid-outlined badge. dot=true adds a pulsing indicator dot.
// muted=true renders in ink-3 / ink-2 for secondary use.
function Stamp({ children, dot = false, muted = false, style }) {
  const s = muted ? { borderColor: "var(--ink-3)", color: "var(--ink-2)", ...style } : style;
  return (
    <span className="stamp" style={s}>
      {dot && <span className="dot" />}
      {children}
    </span>
  );
}

// ── Cursor ────────────────────────────────────────────────────
// Static block cursor (blinking controlled via CSS .cursor class).
function Cursor({ style }) {
  return <span className="cursor" style={style} aria-hidden="true" />;
}

// ── Label ─────────────────────────────────────────────────────
// Small uppercase tracking caption.
function Label({ children, as: Tag = "div", style, className = "" }) {
  return <Tag className={`label ${className}`} style={style}>{children}</Tag>;
}

// ── MetaPair ──────────────────────────────────────────────────
// Small key / value stack used in project meta rows.
function MetaPair({ k, v, style }) {
  return (
    <div style={style}>
      <span className="label" style={{ display: "block", marginBottom: 6 }}>{k}</span>
      <span style={{ fontSize: 14, color: "var(--ink)", lineHeight: 1.5 }}>{v}</span>
    </div>
  );
}

// ── KVRow ─────────────────────────────────────────────────────
// Single key / value row with dashed bottom rule.
function KVRow({ k, children }) {
  return (
    <div className="row">
      <span className="k">{k}</span>
      <span>{children}</span>
    </div>
  );
}

Object.assign(window, { Tag, Stamp, Cursor, Label, MetaPair, KVRow });