import React from 'react';
import { createBrowserRouter, Navigate } from 'react-router';
import { ProtectedRoute } from './components/ProtectedRoute';
import { ErrorPage } from './components/ErrorPage';
import { NotFoundPage } from './components/NotFoundPage';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import { MainLayout } from './layouts/MainLayout';
import UserProfilePage from './pages/UserProfilePage';
import FollowPage from './pages/FollowPage';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <HomePage />
  },
  {
    path: '/login',
    element: <LoginPage />
  },
  {
    path: '/admin',
    element: (
      <ProtectedRoute>
        <MainLayout />
      </ProtectedRoute>
    ),
    children: [
      // {
      //   index: true,
      //   element: <Navigate to="/admin/dashboard" />
      // },
      {
        path: 'follow',
        element: <FollowPage />,
        errorElement: <ErrorPage />
      },
      {
        path: 'users/:id',
        element: <UserProfilePage />,
        errorElement: <ErrorPage />
      },
      {
        path: '*',
        element: <NotFoundPage />,
        errorElement: <ErrorPage />
      },
    ],
  },
  {
    path: '*',
    element: <NotFoundPage />,
    errorElement: <ErrorPage />
  },
]);