import {
  RouterProvider,
  createBrowserRouter,
  Navigate,
} from 'react-router-dom';
import { useState } from 'react';
import Chat from './pages/Chat.tsx';
import Login from './pages/Login.tsx';
import Signup from './pages/Signup.tsx';
import Settings from './pages/Settings.tsx';
import Lost from './pages/404.tsx';
import { AuthContext } from './utils/AuthProvider.tsx';
import ProtectedRoutes from './utils/ProtectedRoutes.tsx';
import axios from 'axios';
export const axiosClient = axios.create({
  baseURL: import.meta.env.BASE_URL,
});
const router = createBrowserRouter([
  {
    path: '/',
    element: <Navigate to="/chat" replace />,
  },
  {
    element: <ProtectedRoutes />,
    children: [
      {
        path: '/chat',
        element: <Chat />,
      },
      {
        path: '/settings',
        element: <Settings />,
      },
    ],
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/signup',
    element: <Signup />,
  },
  {
    path: '*',
    element: <Lost />,
  },
]);

function App() {
  const [authorized, setAuthorized] = useState<boolean | null>(null);
  return (
    <AuthContext.Provider value={{ authorized, setAuthorized }}>
      <RouterProvider router={router} />
    </AuthContext.Provider>
  );
}

export default App;
