// QueueSummary — compact queue status bar with start/stop control.

function QueueSummary({ queue, onStartStop }) {
  if (!queue) return null;
  return (
    <div className="flex items-center gap-4 text-sm">
      <span className="text-gray-500">Queue: <strong>{queue.queue_size || 0}</strong> pending</span>
      <span className="text-gray-500">Total jobs: <strong>{queue.total_jobs || 0}</strong></span>
      {queue.by_status && Object.entries(queue.by_status).map(([s, c]) => (
        <span key={s} className="text-xs text-gray-400">{s}: {c}</span>
      ))}
      <span className={`text-xs font-medium ${queue.running ? "text-emerald-600" : "text-gray-400"}`}>
        {queue.running ? "● Running" : "○ Stopped"}
      </span>
      <button onClick={() => onStartStop(!queue.running)}
        className={`text-xs px-2 py-1 rounded ${queue.running ? "bg-red-100 text-red-600 hover:bg-red-200" : "bg-emerald-100 text-emerald-600 hover:bg-emerald-200"}`}>
        {queue.running ? "Stop" : "Start"}
      </button>
    </div>
  );
}
