import { Spin } from 'antd'
import { FC, ReactNode, Suspense, lazy } from 'react'
import { Navigate, RouteObject } from 'react-router-dom'
import { createHashRouter } from 'react-router-dom'

const Loading = () => (
  <div
    style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh'
    }}
  >
    <Spin size='large' />
  </div>
)

export const LazyLoad = (Component: FC): ReactNode => {
  return (
    <Suspense fallback={<Loading />}>
      <Component />
    </Suspense>
  )
}

const router: RouteObject[] = [
  {
    path: '/',
    children: [
      {
        path: '/',
        element: LazyLoad(lazy(() => import('@/pages/home')))
      },
      {
        path: '/test1',
        element: LazyLoad(lazy(() => import('@/pages/test1')))
      },
      {
        path: '/test2',
        element: LazyLoad(lazy(() => import('@/pages/test2')))
      },
      {
        path: '/zh-en-translator',
        element: LazyLoad(lazy(() => import('@/pages/zh-en-translator')))
      },
      {
        path: '/spell-check',
        element: LazyLoad(lazy(() => import('@/pages/spell-check')))
      },
      {
        path: '/spell-check-system',
        element: LazyLoad(lazy(() => import('@/pages/spell-check-system')))
      },
      {
        path: '/404',
        element: <>404</>
      }
    ]
  },
  {
    path: '*',
    element: <Navigate to='/404' />
  }
]

export default createHashRouter(router)