frontend/src/components/console/ConsoleHeader.tsx

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

/**
 * 控制台页头组件
 * 用于展示页面标题、描述和操作区
 */

interface ConsoleHeaderProps {
  /** 页面标题 */
  title: string;
  /** 描述信息 */
  description?: string;
  /** 标题右侧的操作区 */
  actions?: React.ReactNode;
  /** 额外的 className */
  className?: string;
}

/**
 * 控制台页头
 * 用于控制台页面的标题区域
 */
export function ConsoleHeader({
  title,
  description,
  actions,
  className,
}: ConsoleHeaderProps) {
  return (
    <div className={cn('mb-6', className)}>
      <div className="flex items-start justify-between gap-4">
        {/* 标题和描述 */}
        <div className="min-w-0 flex-1">
          <h1 className="text-lg font-semibold text-console-text-primary">
            {title}
          </h1>
          {description && (
            <p className="mt-1 text-sm text-console-text-secondary">
              {description}
            </p>
          )}
        </div>

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