import { useEffect, useState } from 'react'
import { parseRoute } from './routes.js'
import QueryBoardPage from '../features/query-board/QueryBoardPage.jsx'
import ItemDetailPage from '../features/item-detail/ItemDetailPage.jsx'

export default function App() {
  const [route, setRoute] = useState(parseRoute)
  useEffect(() => {
    const onHash = () => setRoute(parseRoute())
    window.addEventListener('hashchange', onHash)
    return () => window.removeEventListener('hashchange', onHash)
  }, [])

  if (route.name === 'item') {
    return <ItemDetailPage itemId={route.itemId} />
  }

  return (
    <div className="admin-shell">
      <main className="admin-main admin-main-full">
        <QueryBoardPage />
      </main>
    </div>
  )
}
