import { type FC } from "react";
import { createBrowserRouter, RouterProvider } from "react-router";

import IndexPage from "./pages/Index";
import LoginPage from "./pages/Login";
import RegisterPage from "./pages/Register";
import AuthorizePage from "./pages/Authorize";
import AuthenticatePage from "./pages/Authenticate";
import AuthLayout from "./layout/AuthLayout";
import DashboardLayout from "./layout/DashboardLayout";
import PersonalInfoPage from "./pages/PersonalInfo";
import ApiServicesPage from "./pages/ApiServices";
import AdminLayout from "./layout/AdminLayout";

const router = createBrowserRouter([
  {
    path: "/",
    element: <AuthLayout />,
    children: [
      {
        path: "/",
        element: <DashboardLayout />,
        children: [
          {
            index: true,
            element: <IndexPage />,
          },
          {
            path: "personal-info",
            element: <PersonalInfoPage />,
          },
          {
            path: "admin",
            element: <AdminLayout />,
            children: [{ path: "api-services", element: <ApiServicesPage /> }],
          },
        ],
      },
    ],
  },
  {
    path: "/auth",
    element: <AuthLayout />,
    children: [
      { index: true, element: <AuthorizePage /> },
      { path: "login", element: <LoginPage /> },
      { path: "register", element: <RegisterPage /> },
      { path: "authenticate", element: <AuthenticatePage /> },
    ],
  },
]);

const App: FC = () => {
  return <RouterProvider router={router} />;
};

export default App;