import { h } from 'preact'
import { Router } from 'preact-router'
import Head from './head.ts'
import Footer from './footer.tsx'
import Header from './header.tsx'
import ErrorPage from './error_page.tsx'
import routes from '../routes.ts'

import s from './app.module.scss'

export default function App({ error, url, title }) {
  return (
    <div id='app' className={s.base}>
      <Head>
        <title>{title || 'Untitled'}</title>
      </Head>

      <Header routes={routes} />

      <main className={s.main}>
        {error ? (
          <ErrorPage error={error} />
        ) : (
          <Router url={url}>
            {routes.map((route) => (
              // @ts-ignore
              <route.component key={route.path} path={route.path} route={route} />
            ))}
          </Router>
        )}
      </main>

      <Footer />
    </div>
  )
}
