// src/App.jsx
import { createContext, useContext, useState } from "react";

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  function login() {
    setUser({ name: "Philip" });
  }

  function logout() {
    setUser(null);
  }

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function Header() {
  const { user, login, logout } = useContext(AuthContext);

  if (user) {
    return (
      <header>
        <p>Welcome, {user.name}</p>
        <button onClick={logout}>Log out</button>
      </header>
    );
  }

  return (
    <header>
      <button onClick={login}>Log in</button>
    </header>
  );
}

function Dashboard() {
  const { user } = useContext(AuthContext);

  if (!user) {
    return <p>Please log in to see your dashboard.</p>;
  }

  return <p>Dashboard content for {user.name}.</p>;
}

function App() {
  return (
    <AuthProvider>
      <Header />
      <Dashboard />
    </AuthProvider>
  );
}

export default App;

/*
  Notes:
  - user starts as null (logged out); login() sets it to a fake user
    object, logout() resets it back to null.
  - Both Header and Dashboard branch their rendering on the same user
    value from context — neither needs user passed to it as a prop.
*/