import { Menu, X, LayoutTemplate } from 'lucide-react';
import { useUIStore } from '@stores/uiStore';
import { Button } from '@components/ui/button';

/**
 * 控制台顶部导航栏
 * 承载产品标识、移动端菜单按钮
 */
export function Navbar() {
  const { sidebarOpen, toggleSidebar } = useUIStore();

  return (
    <header className="sticky top-0 z-50 border-b border-console-border bg-console-surface-base">
      <div className="px-4 h-12 flex items-center justify-between">
        {/* 左侧：移动端菜单按钮 + 产品标识 */}
        <div className="flex items-center gap-3">
          {/* 移动端菜单切换按钮 */}
          <Button
            variant="ghost"
            size="icon"
            onClick={toggleSidebar}
            className="md:hidden"
            aria-label={sidebarOpen ? '关闭导航' : '打开导航'}
          >
            {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </Button>

          {/* 产品标识 */}
          <div className="flex items-center gap-2">
            <LayoutTemplate className="h-5 w-5 text-console-text-primary" />
            <span className="text-sm font-semibold text-console-text-primary">
              插件控制台
            </span>
          </div>
        </div>

        {/* 右侧：环境信息（可选） */}
        <div className="flex items-center gap-2">
          {/* 环境标签 - 由下游页面按需显示 */}
        </div>
      </div>
    </header>
  );
}