/**
 * Renders a colored status badge.
 * @param {{ status: string }} props
 * @returns {import('react').ReactNode}
 */
export default function StatusBadge({ status }) {
  const colors = {
    running: 'bg-status-green/20 text-status-green border-status-green/30',
    stopped: 'bg-status-red/20 text-status-red border-status-red/30',
    paused: 'bg-status-yellow/20 text-status-yellow border-status-yellow/30',
  };
  const colorClass = colors[status] || 'bg-status-gray/20 text-status-gray border-status-gray/30';

  return (
    <span className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium capitalize ${colorClass}`}>
      <span className={`h-1.5 w-1.5 rounded-full ${
        status === 'running' ? 'bg-status-green' :
        status === 'stopped' ? 'bg-status-red' :
        status === 'paused' ? 'bg-status-yellow' :
        'bg-status-gray'
      }`} />
      {status}
    </span>
  );
}