Implement Global Theming (Light/Dark Mode) with useContext

import React, { useState, useContext, createContext, useMemo, useCallback } from 'react';

// 1. Create a Context
const ThemeContext = createContext(null);

// 2. Create a Provider Component
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light'); // 'light' or 'dark'

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

  // Memoize the value to prevent unnecessary re-renders of consumers
  const contextValue = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);

  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. Create a Custom Hook to consume the context
export function useTheme() {
  const context = useContext(ThemeContext);
  if (context === null) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

// Example Usage:
// import React from 'react';
// import { ThemeProvider, useTheme } from './useTheme'; // Assuming useTheme.js

// function ThemeSwitcher() {
//   const { theme, toggleTheme } = useTheme();
//   return (
//     <button onClick={toggleTheme}>
//       Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
//     </button>
//   );
// }

// function ThemedComponent() {
//   const { theme } = useTheme();
//   const style = {
//     padding: '20px',
//     margin: '10px',
//     borderRadius: '8px',
//     backgroundColor: theme === 'light' ? '#fff' : '#333',
//     color: theme === 'light' ? '#333' : '#fff',
//     border: `1px solid ${theme === 'light' ? '#ccc' : '#666'} `,
//   };
//   return (
//     <div style={style}>
//       This component uses the {theme} theme.
//     </div>
//   );
// }

// function AppContent() { // Renamed to avoid confusion with the main App
//   const { theme } = useTheme(); // Access theme here
//   return (
//     <div style={{ padding: '20px', minHeight: '100vh', backgroundColor: theme === 'light' ? '#f0f2f5' : '#282c34', color: theme === 'light' ? '#333' : '#f0f2f5' }}>
//       <h1>My Themed Application</h1>
//       <ThemeSwitcher />
//       <ThemedComponent />
//       <ThemedComponent />
//     </div>
//   );
// }

// function App() {
//   return (
//     <ThemeProvider>
//       <AppContent />
//     </ThemeProvider>
//   );
// }
// export default App;