import { ClipboardTextIcon, HouseIcon, InfoIcon, SquaresFourIcon, UserIcon } from '@phosphor-icons/react'
import type { Icon } from '@phosphor-icons/react'
import type { RouteObject } from 'react-router'
import App from './App.tsx'
import About from './About.tsx'
import Me from './Me.tsx'

export type PageRoute = RouteObject & {
  handle?: { title: string; icon: Icon }
  children?: PageRoute[]
}

export const pageRoutes = [
  {
    id: 'home',
    index: true,
    Component: App,
    handle: { title: '首页', icon: HouseIcon },
  },
  {
    id: 'form',
    path: '/form',
    lazy: async () => ({ Component: (await import('./FormExample.tsx')).default }),
    handle: { title: '表单示例', icon: ClipboardTextIcon },
  },
  {
    id: 'ui-kit',
    path: '/ui-kit',
    lazy: async () => ({ Component: (await import('./UiKit.tsx')).default }),
    handle: { title: 'UI Kit', icon: SquaresFourIcon },
  },
  {
    id: 'about',
    path: '/about',
    handle: { title: '关于', icon: InfoIcon },
    children: [
      {
        id: 'about-index',
        index: true,
        Component: About,
        handle: { title: '关于概览', icon: InfoIcon },
      },
      {
        id: 'about-me',
        path: 'me',
        Component: Me,
        handle: { title: '关于我', icon: UserIcon },
      },
    ],
  },
] satisfies PageRoute[]