import { Suspense } from 'react'
import PageWithPermission from '../permissions/PageWithPermission'
import { Spinner } from '../components'

const withRouteWrapper = (routes) => {
  return routes?.map((item, index) => {
    if (item?.children) {
      return {
        ...item,
        children: withRouteWrapper(item.children),
      }
    }
    return {
      ...item,
      element: item?.element ? (
        <Suspense fallback={<Spinner />} key={index}>
          <PageWithPermission permissionKey={item?.permissionKey}>
            {item.element}
          </PageWithPermission>
        </Suspense>
      ) : undefined,
    }
  })
}
export default withRouteWrapper
