import { StrictMode, useEffect } from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter, Routes, Route, useLocation } from "react-router"
import { HomePage } from "@/pages/home"
import { AboutPage } from "@/pages/about"
import BlogTemplate from "./templates/BlogTemplate"
import "./index.css"
import { PostsPage } from "./pages/posts"
import TagTemplate from "./templates/TagTemplate"

export default function ScrollToTop() {
  const { pathname } = useLocation()

  useEffect(() => {
    window.scrollTo(1, 1)
  }, [pathname])

  return null
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <ScrollToTop />
      <Routes>
        <Route index element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/posts/page/:page" element={<PostsPage />} />
        <Route path="/posts/:slug" element={<BlogTemplate />} />
        <Route path="/tags/:tag" element={<TagTemplate />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>
)
