import { useEffect, useState } from 'react'
import './App.css'
import { createHashRouter, RouterProvider, useLocation } from "react-router-dom"
import { LandingPage } from './pages/Authentication/LandingPage';
import { Login } from './pages/Authentication/Login';
import { Signup } from './pages/Authentication/Signup';
import { ApiContext } from "./contexts/api"
import { Api } from "./lib/Api"
import { Root } from './pages/Root';
import { Home } from './pages/Home';
import { Friends } from './pages/Friends';
import { Profile } from './pages/Profile';
import { Test } from './pages/TestPage';
import { Spotify } from './pages/Spotify';

const router = createHashRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        path: '/',
        element: <LandingPage />
      },
      {
        path: 'login/',
        element: <Login />
      },
      {
        path: 'signup/',
        element: <Signup />
      },
      {
        path: 'home',
        element: <Home />
      },
      {
        path: 'friends',
        element: <Friends />
      },
      {
        path: 'profile',
        element: <Profile />
      },
      {
        path: 'test',
        element: <Test />
      },
      {
        path: 'spotify',
        element: <Spotify />
      }
    ]
  }
])

export const App = () => {
  const [api, setApi] = useState(new Api());

  return (
    <>
    <ApiContext.Provider value = {api}>
      <RouterProvider router={router} />
    </ApiContext.Provider>
    </>
  )
}