import { render } from 'hono/jsx/dom'
import { App, route } from './app'

const root = document.getElementById('root')

// Initial render
if (root) {
  render(<App />, root)
}

// On route change, only update the content div
function updateContent() {
  const contentDiv = document.getElementById('content')
  if (contentDiv)
    render(route(window.location.pathname), contentDiv)
}

window.addEventListener('routechange', updateContent)
window.addEventListener('popstate', updateContent)