interface SearchResultHeaderProps {
  total: number;
  viewMode: 'grid' | 'list';
  onViewModeChange: (mode: 'grid' | 'list') => void;
  sortBy: string;
  onSortChange: (sort: string) => void;
}

export function SearchResultHeader({
  total,
  viewMode,
  onViewModeChange,
  sortBy,
  onSortChange
}: SearchResultHeaderProps) {
  return (
    <div className="result-header">
      <div className="result-info">
        为您找到 <span className="result-count">{total}</span> 个相关模板
      </div>
      <div className="flex items-center gap-4">
        <div className="view-toggle">
          <button 
            className={`view-btn ${viewMode === 'grid' ? 'active' : ''}`}
            onClick={() => onViewModeChange('grid')}
            aria-label="网格视图"
          >
            <i className="ri-grid-line"></i>
          </button>
          <button 
            className={`view-btn ${viewMode === 'list' ? 'active' : ''}`}
            onClick={() => onViewModeChange('list')}
            aria-label="列表视图"
          >
            <i className="ri-list-check"></i>
          </button>
        </div>
        <select 
          className="px-3 py-3 border border-gray-200 rounded-lg text-sm"
          value={sortBy}
          onChange={(e) => onSortChange(e.target.value)}
        >
          <option value="relevance">相关排序</option>
          <option value="newest">最新更新</option>
          {/* <option value="popular">使用频率</option>
          <option value="rating">评分最高</option> */}
        </select>
      </div>
    </div>
  );
}