frontend/src/components/console/ConsoleToolbar.tsx

import React from 'react';
import { cn } from '@/lib/utils';

/**
 * 控制台工具栏组件
 * 用于展示筛选、搜索等操作区
 */

interface ConsoleToolbarProps {
  /** 左侧内容 */
  children?: React.ReactNode;
  /** 右侧内容 */
  actions?: React.ReactNode;
  /** 额外的 className */
  className?: string;
}

/**
 * 控制台工具栏
 * 用于控制台页面的操作区域
 */
export function ConsoleToolbar({
  children,
  actions,
  className,
}: ConsoleToolbarProps) {
  return (
    <div
      className={cn(
        'flex items-center justify-between gap-4 py-3 px-4',
        'bg-console-surface-raised border-b border-console-border',
        className
      )}
    >
      {/* 左侧内容（筛选、搜索等） */}
      <div className="flex items-center gap-3 flex-1 min-w-0">
        {children}
      </div>

      {/* 右侧操作 */}
      {actions && (
        <div className="flex items-center gap-2 shrink-0">
          {actions}
        </div>
      )}
    </div>
  );
}