import { Router, Route, Link, useRouter } from '@joshdoesthis/react-router'

const Home = () => {
  const router = useRouter()

  return (
    <div>
      <h1>Home</h1>
      <Link path='/page/1'>Page 1</Link>
      <Link path='/page/2'>Page 2</Link>
      <button onClick={() => router.navigate('/page/3')}>Page 3</button>
    </div>
  )
}

const Page = () => {
  const router = useRouter()
  const { params } = router.state

  return <h1>Page: {params.pageId}</h1>
}

const NotFound = () => {
  const router = useRouter()

  return (
    <div>
      <h1>Not Found</h1>
      <button onClick={() => router.back()}>Go Back</button>
    </div>
  )
}

const App = () => {
  return (
    <Router>
      <Route path='/' component={Home} />
      <Route path='/page/:pageId' component={Page} />
      <Route path='/404' component={NotFound} />
    </Router>
  )
}

import { Router, Route, Link, useRouter } from '@joshdoesthis/react-router'
import { Auth, useAuth } from '../provider/auth'

const Home = () => {
  const router = useRouter()

  return (
    <div>
      <h1>Home</h1>
      <Link path='/page/1'>Page 1</Link>
      <Link path='/page/2'>Page 2</Link>
      <button onClick={() => router.navigate('/page/3')}>Page 3</button>
    </div>
  )
}

const Page = () => {
  const router = useRouter()
  const { params } = router.state

  return <h1>Page: {params.pageId}</h1>
}

const Login = () => {
  return <h1>Login</h1>
}

const NotFound = () => {
  const router = useRouter()

  return (
    <div>
      <h1>Not Found</h1>
      <button onClick={() => router.back()}>Go Back</button>
    </div>
  )
}

const App = () => {
  const auth = useAuth()

  return (
    <Router authenticated={auth.state.authenticated}>
      <Route path='/' component={Home} />
      <Route auth path='/page/:pageId' component={Page} />
      <Route path='/login' component={Login} />
      <Route path='/404' component={NotFound} />
    </Router>
  )
}

const AuthenticatedApp = () => {
  return (
    <Auth>
      <App />
    </Auth>
  )
}