import Layout from '@pages/Layout'
import { Route, Router } from '@solidjs/router'
import { For, lazy } from 'solid-js'
import { render } from 'solid-js/web'
import App from './App'
import './index.scss'
import { ROUTES } from './routes'

const root = document.getElementById('root')

render(
  () => (
    <Router root={App}>
      <Route path="/login" component={lazy(() => import('@pages/Login'))} />
      <Route path="/" component={Layout}>
        <For each={ROUTES}>
          {(route) =>
            route.show && (
              <Route
                path={route.path}
                component={route.components}
                matchFilters={route.filter}
              />
            )
          }
        </For>
      </Route>
      <Route path="*" component={lazy(() => import('@pages/NotFound'))} />
    </Router>
  ),
  root,
)
