// Reusable primitives. Each is a thin wrapper around DOM that applies kit
// classes. No internal state — purely cosmetic.

const cx = (...xs) => xs.filter(Boolean).join(" ");

function Button({ variant = "secondary", size, className, children, ...rest }) {
  return (
    <button
      className={cx("pv-btn", `pv-btn--${variant}`, size === "sm" && "pv-btn--small", className)}
      {...rest}
    >
      {children}
    </button>
  );
}

function Input({ className, ...rest }) {
  return <input className={cx("pv-input", className)} {...rest} />;
}

function Select({ className, children, ...rest }) {
  return (
    <select className={cx("pv-input", "pv-select", className)} {...rest}>
      {children}
    </select>
  );
}

function Field({ label, children }) {
  return (
    <label className="pv-field">
      <span className="pv-field-label">{label}</span>
      {children}
    </label>
  );
}

function SourceBadge({ source }) {
  return <span className="pv-source-badge">{source}</span>;
}

function Pill({ kind = "hit", children }) {
  return (
    <span className={cx("pv-pill", `pv-pill--${kind}`)}>
      {kind === "hit" && <span className="dot" style={{ background: "var(--green-600)" }} />}
      {kind === "miss" && <span className="dot" style={{ background: "var(--warn-600)" }} />}
      {kind === "error" && <span className="dot" style={{ background: "var(--danger-600)" }} />}
      {children}
    </span>
  );
}

function TypeBadge({ type }) {
  const known = ["string", "number", "boolean", "object", "array", "null"];
  const cls = known.includes(type) ? type : "object";
  return <span className={cx("pv-badge", `pv-badge--${cls}`)}>{type}</span>;
}

// Icons: small inline lucide-style SVGs. Stroke 1.5, currentColor.
function Icon({ name, size = 16 }) {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: 1.5,
    strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch (name) {
    case "x":
      return <svg {...props}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>;
    case "chevron-down":
      return <svg {...props}><polyline points="6 9 12 15 18 9"/></svg>;
    case "search":
      return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case "loader":
      return <svg {...props} style={{ animation: "pv-spin 600ms linear infinite" }}><path d="M21 12a9 9 0 1 1-6.2-8.55"/></svg>;
    case "copy":
      return <svg {...props}><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>;
    case "external":
      return <svg {...props}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>;
    default: return null;
  }
}

Object.assign(window, { cx, Button, Input, Select, Field, SourceBadge, Pill, TypeBadge, Icon });