import { lazy, Suspense, type ComponentType, type ReactNode } from 'react'
import { Loading } from '@/components/ui'

/** 路由级懒加载包装 */
export function lazyPage(factory: () => Promise<{ default: ComponentType<any> }>, fallback?: ReactNode) {
  const Comp = lazy(factory)

  function LazyRoute() {
    return (
      <Suspense
        fallback={
          fallback ?? (
            <div className="flex min-h-[240px] items-center justify-center p-8">
              <Loading />
            </div>
          )
        }
      >
        <Comp />
      </Suspense>
    )
  }

  LazyRoute.displayName = 'LazyRoute'
  return LazyRoute
}
