import { FolderKanban, LayoutDashboard, Settings, PlayCircle, Cloud, Package ,Grape} from 'lucide-react'
import { Sidebar, type NavItem } from '@/components/a/Sidebar'
import { Logo } from './CNBBlackLogo.tsx'

const navItems: NavItem[] = [
  {
    title: '仓库管理',
    path: '/',
    icon: <FolderKanban className="w-5 h-5" />,
  },
  {
    title: '云端环境',
    path: '/cloud-env',
    icon: <Cloud className="w-5 h-5" />,
  },
  {
    title: '工作空间',
    path: '/workspaces',
    icon: <LayoutDashboard className="w-5 h-5" />,
  },
  {
    title: '制品中心',
    path: '/cnb-packages',
    icon: <Package className="w-5 h-5" />,
  },
  {
    title: '代码图像',
    path: '/root/code-graph',
    icon: <Grape className="w-5 h-5" />,
    external: true,
  },
  {
    title: '其他',
    path: '/other',
    icon: <PlayCircle className="w-5 h-5" />,
    children: [
      {
        title: '应用配置',
        path: '/config',
        icon: <Settings className="w-5 h-5" />,
      },
    ]
  },
]

export function SidebarLayout({ children }: { children: React.ReactNode }) {
  return (
    <Sidebar items={navItems} title='云原生' logo={<Logo className='w-6 h-6' />}
      footer={<div className="p-4 border-t text-sm text-gray-500 hover:text-gray-700">
        <a
          href="https://cnb.cool/kevisual/cnb-center"
          target="_blank"
          rel="noopener noreferrer"
        >
          CNB Center
        </a>
      </div>}
    >
      {children}
    </Sidebar>
  )
}