import { h } from 'preact'
import { LocationProvider, Route, Router } from 'preact-iso'
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 (
    <LocationProvider>
      <div id='app' className={s.base}>
        <Head>
          <title>{title || 'Untitled'}</title>
        </Head>

        <Header routes={routes} />

        <main className={s.main}>
          {error ? (
            <ErrorPage error={error} />
          ) : (
            <Router>
              {routes.map((route) => (
                <Route key={route.path} route={route} path={route.path} component={route.component} />
              ))}
            </Router>
          )}
        </main>

        <Footer />
      </div>
    </LocationProvider>
  )
}
