import "./App.css";
import Header from "./component/Header";
import Main from "./component/Main";
import AuthRoute from "./component/AuthRoute";
import { Switch } from "react-router";
import Login from "./component/Login";
import "semantic-ui-css/semantic.min.css";
import React, { useState, createContext, useEffect } from "react";

export const AuthContext = createContext();

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState(null);
  console.log(user);
  const state = {
    user,
    setUser,
    isLoggedIn,
    setIsLoggedIn,
  };

  useEffect(() => {
    localStorage.setItem("loggedIn", isLoggedIn);
  }, [isLoggedIn]);

  return (
    <AuthContext.Provider value={state}>
      <div>
        <Switch>
          <AuthRoute exact path="/login">
            <Login />
          </AuthRoute>
          <AuthRoute>
            <Header />
            <Main />
          </AuthRoute>
        </Switch>
      </div>
    </AuthContext.Provider>
  );
}

export default App;