// ProviderConfigPanel - Component for managing tool provider configuration
import React from 'react';

function ProviderConfigPanel({ 
  tool, 
  currentProvider, 
  availableProviders, 
  onProviderChange, 
  isSaving,
  isHuman 
}) {
  if (isHuman) {
    return (
      <span className="text-xs text-gray-500">Manual handoff — no provider needed</span>
    );
  }

  return (
    <div className="flex items-center gap-2">
      <span className="text-xs text-gray-500">LLM Provider:</span>
      <select
        value={currentProvider || "openrouter"}
        onChange={(e) => onProviderChange(tool.name, e.target.value)}
        disabled={isSaving === tool.name}
        className="text-xs border rounded px-2 py-1 disabled:opacity-50"
      >
        {availableProviders.map(p => (
          <option key={p} value={p}>{p}</option>
        ))}
      </select>
      {isSaving === tool.name && (
        <span className="text-xs text-blue-500">Saving...</span>
      )}
    </div>
  );
}

export default ProviderConfigPanel;
