'use client';
/*
 * Tiny components that are the ONLY React nodes subscribed to useColorScheme().
 * When the user flips the theme:
 *   1. useColorScheme().setMode() sets data-mui-color-scheme on <html>
 *   2. CSS custom properties resolve to new values → browser repaints
 *   3. React re-renders ONLY these two components (icon label / switch state)
 * Nothing above them in the tree is touched.
 */
import { FormControlLabel, Switch, Tooltip } from '@mui/material';
import { useColorScheme } from '@mui/material/styles';
import { useTranslations } from 'next-intl';
import { AppIconButton } from '@/components';

/** Icon button for the TopBar dark-mode toggle. */
export function DarkModeToggleButton() {
  const { colorScheme, setMode } = useColorScheme();
  const t = useTranslations('common');
  const isDark = colorScheme === 'dark';
  return (
    <AppIconButton
      icon={isDark ? 'day' : 'night'}
      title={isDark ? t('light_mode') : t('dark_mode')}
      onClick={() => setMode(isDark ? 'light' : 'dark')}
    />
  );
}

/** Labeled switch for the SideBar dark-mode toggle. */
export function DarkModeFormSwitch() {
  const { colorScheme, setMode } = useColorScheme();
  const t = useTranslations('common');
  const isDark = colorScheme === 'dark';
  return (
    <Tooltip title={isDark ? t('light_mode') : t('dark_mode')}>
      <FormControlLabel
        label={isDark ? t('dark_mode') : t('light_mode')}
        control={<Switch checked={isDark} onChange={() => setMode(isDark ? 'light' : 'dark')} />}
      />
    </Tooltip>
  );
}
