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

const ThemeContext = createContext(null);

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  function toggleTheme() {
    setTheme((t) => (t === "light" ? "dark" : "light"));
  }

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function useTheme() {
  return useContext(ThemeContext);
}

function Header() {
  const { theme, toggleTheme } = useTheme();
  return (
    <header>
      <p>Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle</button>
    </header>
  );
}

function Footer() {
  const { theme } = useTheme();
  return <footer>Footer is currently {theme} themed.</footer>;
}

function App() {
  return (
    <ThemeProvider>
      <Header />
      <Footer />
    </ThemeProvider>
  );
}

export default App;

/*
  Notes:
  - useTheme() is just a one-line wrapper around
    useContext(ThemeContext) — Header and Footer no longer import or
    reference ThemeContext at all, only the clearly-named useTheme hook.
  - Behavior is identical to Challenge 1; this is purely a
    readability/maintainability refactor, not a functional change.
*/