// ui.jsx — icons + small presentational components
// Exposes window.Icon, window.ModelDot, window.Spinner

function Icon({ name, size = 18, stroke = 1.6, style }) {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round",
    strokeLinejoin: "round", style,
  };
  switch (name) {
    case "send":
      return (<svg {...common}><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></svg>);
    case "copy":
      return (<svg {...common}><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" /></svg>);
    case "check":
      return (<svg {...common}><path d="M4 12.5l5 5 11-11" /></svg>);
    case "history":
      return (<svg {...common}><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v4h4" /><path d="M12 8v4l3 2" /></svg>);
    case "regen":
      return (<svg {...common}><path d="M21 12a9 9 0 1 1-2.6-6.4" /><path d="M21 4v5h-5" /></svg>);
    case "sun":
      return (<svg {...common}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>);
    case "moon":
      return (<svg {...common}><path d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.5 6.5 0 0 0 9.8 9.8z" /></svg>);
    case "globe":
      return (<svg {...common}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18" /></svg>);
    case "trash":
      return (<svg {...common}><path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13" /></svg>);
    case "plus":
      return (<svg {...common}><path d="M12 5v14M5 12h14" /></svg>);
    case "close":
      return (<svg {...common}><path d="M6 6l12 12M18 6L6 18" /></svg>);
    case "text":
      return (<svg {...common}><path d="M4 6h16M4 12h16M4 18h10" /></svg>);
    case "image":
      return (<svg {...common}><rect x="3" y="4" width="18" height="16" rx="2" /><circle cx="8.5" cy="9.5" r="1.6" /><path d="M21 16l-5-5L5 20" /></svg>);
    case "video":
      return (<svg {...common}><rect x="3" y="5" width="13" height="14" rx="2" /><path d="M16 9l5-3v12l-5-3" /></svg>);
    case "code":
      return (<svg {...common}><path d="M8 7l-5 5 5 5M16 7l5 5-5 5" /></svg>);
    case "spark":
      return (<svg {...common} fill="currentColor" stroke="none"><path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z" /></svg>);
    case "key":
      return (<svg {...common}><circle cx="8" cy="8" r="4.5" /><path d="M11.2 11.2L20 20M16 16l2.5-2.5M14 18l2-2" /></svg>);
    default:
      return null;
  }
}

function ModelDot({ color, size = 9 }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: 3, background: color,
      display: "inline-block", flex: "0 0 auto",
      boxShadow: "0 0 0 1px rgba(0,0,0,.06) inset",
    }} />
  );
}

function Spinner({ size = 16 }) {
  return (
    <span className="bp-spin" style={{
      width: size, height: size, borderRadius: "50%",
      border: "2px solid currentColor", borderTopColor: "transparent",
      display: "inline-block", opacity: 0.9,
    }} />
  );
}

Object.assign(window, { Icon, ModelDot, Spinner });