app/agents/AgentFilters.tsx

'use client';

import { useState } from 'react';

export default function AgentFilters() {
  const [activeFilter, setActiveFilter] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');

  const filters = [
    { key: 'all', label: '全部', count: 24 },
    { key: 'active', label: '运行中', count: 18 },
    { key: 'paused', label: '暂停', count: 4 },
    { key: 'draft', label: '草稿', count: 2 }
  ];

  const types = [
    { key: 'all', label: '全部类型' },
    { key: 'chat', label: '对话型' },
    { key: 'analysis', label: '分析型' },
    { key: 'generation', label: '生成型' },
    { key: 'workflow', label: '工作流型' }
  ];

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div className="flex items-center space-x-4">
          {filters.map((filter) => (
            <button
              key={filter.key}
              onClick={() => setActiveFilter(filter.key)}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors cursor-pointer whitespace-nowrap ${
                activeFilter === filter.key
                  ? 'bg-blue-100 text-blue-700'
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              {filter.label} ({filter.count})
            </button>
          ))}
        </div>
        
        <div className="flex items-center space-x-4">
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <div className="w-4 h-4 flex items-center justify-center">
                <i className="ri-search-line text-gray-400"></i>
              </div>
            </div>
            <input
              type="text"
              placeholder="搜索Agent..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
            />
          </div>
          
          <div className="relative">
            <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
              类型筛选
              <div className="w-4 h-4 flex items-center justify-center inline-block ml-2">
                <i className="ri-arrow-down-s-line"></i>
              </div>
            </button>
          </div>
          
          <div className="relative">
            <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap">
              排序
              <div className="w-4 h-4 flex items-center justify-center inline-block ml-2">
                <i className="ri-arrow-down-s-line"></i>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}