React Context و Hooks: رویکرد مدرن به مدیریت دولتی 🚀

const App = () => {
  const [theme, setTheme] = useState('light');
  return (
    <Header theme={theme}>
      <Navigation theme={theme}>
        <UserProfile theme={theme} />
      Navigation>
    Header>
  );
};

const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {},
});

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

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

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

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

const ThemedButton = () => {
  const { theme, toggleTheme } = useTheme();
  return (
    <button 
      onClick={toggleTheme}
      style={{ 
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#333' : '#fff'
      }}
    >
      Toggle Theme
    button>
  );
};

const AppProviders = ({ children }) => (
  <AuthProvider>
    <ThemeProvider>
      <UserPreferencesProvider>
        {children}
      UserPreferencesProvider>
    ThemeProvider>
  AuthProvider>
);

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

  const value = useMemo(() => ({
    theme,
    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light'),
  }), [theme]);

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

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

const themes = {
  light: {
    primary: '#007AFF',
    background: '#FFFFFF',
    text: '#000000',
  },
  dark: {
    primary: '#0A84FF',
    background: '#000000',
    text: '#FFFFFF',
  },
  system: 'auto',
};

const ThemeContext = createContext({
  theme: themes.light,
  themeName: 'light',
  setThemeName: (name: 'light' | 'dark' | 'system') => {},
});

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
};

// Usage in components
const ThemedComponent = () => {
  const { theme, themeName, setThemeName } = useTheme();
  return (
    <div style={{ background: theme.background, color: theme.text }}>
      <select 
        value={themeName}
        onChange={(e) => setThemeName(e.target.value as 'light' | 'dark' | 'system')}
      >
        <option value="light">Lightoption>
        <option value="dark">Darkoption>
        <option value="system">Systemoption>
      select>
    div>
  );
};