// components/ui.jsx — Stateless UI primitives: StatusBadge, CostBar, Card, StateBadge.
// Depends on: React (global)

function StatusBadge({ ok, label }) {
  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${ok ? "bg-emerald-100 text-emerald-800" : "bg-red-100 text-red-800"}`}>
      {label}
    </span>
  );
}

function CostBar({ used, limit, label }) {
  const pct = limit > 0 ? Math.min(100, (used / limit) * 100) : 0;
  const color = pct > 90 ? "bg-red-500" : pct > 70 ? "bg-amber-500" : "bg-emerald-500";
  return (
    <div className="mb-2">
      <div className="flex justify-between text-xs mb-1">
        <span className="text-gray-600">{label}</span>
        <span className="font-mono">${used.toFixed(2)} / ${limit.toFixed(2)}</span>
      </div>
      <div className="w-full bg-gray-200 rounded-full h-2">
        <div className={`${color} h-2 rounded-full transition-all`} style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}

function Card({ title, badge, children, className = "" }) {
  return (
    <div className={`bg-white rounded-xl shadow-sm border border-gray-200 p-5 ${className}`}>
      {title && (
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-sm font-semibold text-gray-900">{title}</h3>
          {badge && badge}
        </div>
      )}
      {children}
    </div>
  );
}

const STATE_COLORS = {
  running: { bg: "bg-emerald-100", text: "text-emerald-700", dot: "bg-emerald-500" },
  stopped: { bg: "bg-gray-100", text: "text-gray-600", dot: "bg-gray-400" },
  paused: { bg: "bg-amber-100", text: "text-amber-700", dot: "bg-amber-500" },
  error: { bg: "bg-red-100", text: "text-red-700", dot: "bg-red-500" },
};

function StateBadge({ state }) {
  const colors = STATE_COLORS[state] || STATE_COLORS.error;
  return (
    <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${colors.bg} ${colors.text}`}>
      <span className={`w-1.5 h-1.5 rounded-full ${colors.dot} ${state === "running" ? "animate-pulse" : ""}`} />
      {state}
    </span>
  );
}
