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

const ThemeContext = createContext(null);

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const [unrelatedCount, setUnrelatedCount] = useState(0); // unrelated state

  const toggleTheme = useCallback(() => {
    setTheme((t) => (t === "light" ? "dark" : "light"));
  }, []);

  // value only changes (a new object) when theme or toggleTheme actually change —
  // not when unrelatedCount changes.
  const value = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

  return (
    <ThemeContext.Provider value={value}>
      <button onClick={() => setUnrelatedCount((c) => c + 1)}>
        Unrelated count: {unrelatedCount}
      </button>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedText() {
  console.log("ThemedText rendered");
  const { theme } = useContext(ThemeContext);
  return <p>Current theme: {theme}</p>;
}

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

export default App;

/*
  Notes:
  - Clicking "Unrelated count" re-renders ThemeProvider, but because
    value is memoized and depends only on theme/toggleTheme, the same
    value object is reused — ThemedText does NOT log a re-render.
  - Without the useMemo around value, { theme, toggleTheme } would be
    a brand-new object every render, and ThemedText would re-render
    every single time the unrelated counter changes, exactly the
    problem Chapter 2's warning described.
*/