import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router'
import { RootLayout } from './layouts/RootLayout'
import { ArtifactsPage } from './pages/ArtifactsPage'
import { CharactersPage } from './pages/CharactersPage'
import { DetailPage } from './pages/DetailPage'
import { HomePage } from './pages/HomePage'

const rootRoute = createRootRoute({
  component: RootLayout,
})

const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: HomePage,
})

const charactersRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/characters',
  component: CharactersPage,
})

const artifactsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/artifacts',
  component: ArtifactsPage,
})

const detailRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/detail/$id',
  component: DetailPage,
})

const routeTree = rootRoute.addChildren([
  indexRoute,
  charactersRoute,
  artifactsRoute,
  detailRoute,
])

export const router = createRouter({
  routeTree,
})

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}
