// 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 Header() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <header>
      <p>Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle</button>
    </header>
  );
}

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

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

export default App;

/*
  Notes:
  - Header and Footer are siblings with no direct connection to each
    other — both reach the same theme value purely through
    useContext(ThemeContext), with nothing passed between them as props.
  - Clicking Header's toggle button updates state inside ThemeProvider,
    which re-renders both consumers with the new theme value.
*/