// TicketStats - Extracted statistics display from TicketsPanel
import React from 'react';

const TOOLS = ["vscode", "aider", "claude-code", "windsurf", "cursor", "roo-code", "continue", "copilot", "human"];

function TicketStats({ stats }) {
  return (
    <div className="space-y-4">
      {/* Main stats bar */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div className="bg-white rounded-lg border p-3 text-center">
          <div className="text-2xl font-bold text-gray-900">{stats.total}</div>
          <div className="text-xs text-gray-500">Total Tickets</div>
        </div>
        <div className="bg-white rounded-lg border p-3 text-center">
          <div className="text-2xl font-bold text-blue-600">{stats.todo}</div>
          <div className="text-xs text-gray-500">To Do</div>
        </div>
        <div className="bg-white rounded-lg border p-3 text-center">
          <div className="text-2xl font-bold text-amber-600">{stats.in_progress}</div>
          <div className="text-xs text-gray-500">In Progress</div>
        </div>
        <div className="bg-white rounded-lg border p-3 text-center">
          <div className="text-2xl font-bold text-emerald-600">{stats.done}</div>
          <div className="text-xs text-gray-500">Done</div>
        </div>
      </div>

      {/* Tool distribution */}
      {Object.keys(stats.by_tool).length > 0 && (
        <div className="bg-white rounded-lg border p-3">
          <h4 className="text-xs font-medium text-gray-500 mb-2">Assigned by Tool</h4>
          <div className="flex flex-wrap gap-2">
            {Object.entries(stats.by_tool).map(([tool, count]) => (
              <span key={tool} className="text-xs px-2 py-1 bg-indigo-50 text-indigo-700 rounded-full">
                {tool}: {count}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

export default TicketStats;
