import Router from 'preact-router'
import { route } from 'preact-router'
import { useEffect } from 'preact/hooks'
import { AdminPage } from './pages/Admin.jsx'

import { HomePage } from './pages/Home.jsx'
import { LoginPage } from './pages/Login.jsx'
import { ProblemPage } from './pages/Problem.jsx'
import { ProfilePage } from './pages/Profile.jsx'

const Redirect = ({ to }) => {
    useEffect(() => {
        route(to, true)
    }, [])

    return (
        <>
            Redirecting to <pre>{to}</pre>...
        </>
    )
}

export const App = ({ url }) => {
    return (
        <Router url={url}>
            <HomePage path="/" />
            <LoginPage path="/login" />
            <ProfilePage path="/profile" />
            <ProblemPage path="/problem/:id" />
            <AdminPage path="/admin" />
            <Redirect default to="/" />
        </Router>
    )
}