import type { ReactNode } from 'react'
import type { LucideIcon } from 'lucide-react'
import { Blocks, House, Info, Shapes } from 'lucide-react'
import { ComponentsRoute } from './components/ComponentsRoute'
import { IconsRoute } from './components/IconsRoute'
import { AboutPage } from './pages/AboutPage'
import { HomePage } from './pages/HomePage'

export interface AppRoute {
  path: string
  label: string
  icon: LucideIcon
  element: ReactNode
  showInNav?: boolean
}

/**
 * 页面、路由和侧边栏的唯一数据源。
 * 新增页面时只在这里增加一项，路由与菜单会同步更新。
 */
export const appRoutes: AppRoute[] = [
  {
    path: '/',
    label: '概览',
    icon: House,
    element: <HomePage />,
  },
  {
    path: '/components',
    label: '组件',
    icon: Blocks,
    element: <ComponentsRoute />,
  },
  {
    path: '/icons',
    label: '图标',
    icon: Shapes,
    element: <IconsRoute />,
  },
  {
    path: '/about',
    label: '关于',
    icon: Info,
    element: <AboutPage />,
  },
]

export const navRoutes = appRoutes.filter(
  (route) => route.showInNav !== false,
)

export function isRouteActive(routePath: string, pathname: string) {
  return routePath === '/'
    ? pathname === '/'
    : pathname === routePath || pathname.startsWith(`${routePath}/`)
}