import { useCallback } from 'react';
import { useColorScheme } from '@mui/material/styles';

/**
 * Returns an event handler that toggles dark/light mode via MUI's CSS-vars system.
 * Calling the returned function sets data-mui-color-scheme on <html> — no React
 * re-render happens outside the component that calls this hook.
 */
export function useEventSwitchDarkMode() {
  const { mode, setMode } = useColorScheme();
  return useCallback(() => {
    setMode(mode === 'dark' ? 'light' : 'dark');
  }, [mode, setMode]);
}
