import { Bot, Key } from 'lucide-react';
import { ProvidersSettings } from './ProvidersSettings';
import { WorkerIndividualSettings } from './WorkerIndividualSettings';

interface AgentLayoutProps {
  agentTab: string;
  setAgentTab: (tab: string) => void;
}

export function AgentLayout({ agentTab, setAgentTab }: AgentLayoutProps) {
  return (
    <div className="flex-1 flex bg-slate-50 overflow-hidden">
       {/* Agent Inner Sidebar */}
       <div className="w-64 bg-white border-r border-slate-200 flex flex-col z-0">
          <div className="p-6 border-b border-slate-100">
             <h2 className="text-lg font-semibold text-slate-800">Agents</h2>
          </div>
          <div className="flex-1 p-4 space-y-2 overflow-y-auto">
             <button
               onClick={() => setAgentTab('worker')}
               className={`w-full flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-all ${agentTab === 'worker' ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
             >
               <Bot size={18} className="mr-3" />
               Individual
             </button>
             <button
               onClick={() => setAgentTab('providers')}
               className={`w-full flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-all ${agentTab === 'providers' ? 'bg-blue-50 text-blue-600' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
             >
               <Key size={18} className="mr-3" />
               Provider Management
             </button>
          </div>
       </div>

       {/* Agent Main Content */}
       <div className="flex-1 overflow-y-auto p-8">
          {agentTab === 'worker' && <WorkerIndividualSettings />}
          {agentTab === 'providers' && <ProvidersSettings />}
       </div>
    </div>
  );
}