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.css'
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
              path={route.path}
              component={route.components}
              matchFilters={route.filter}
            />
          )}
        </For>
      </Route>
      <Route path="*" component={lazy(() => import('@pages/NotFound'))} />
    </Router>
  ),
  root,
)