/**
 * Theme toggle — a header control that flips light ⇄ dark (spec §07 Appearance).
 *
 * This header button is the UI-theme control's permanent home: the M5 settings
 * review distributed preferences to their panes and dropped the central Settings
 * modal, so Appearance stays a one-click header toggle (spec §07). It writes the
 * persisted `ui.theme` key directly — no separate Appearance control to sync.
 *
 * The button shows the icon of the theme you'll switch *to* (moon when light,
 * sun when dark) and labels itself for screen readers. Chart + editor follow the
 * theme via their own store subscriptions, so flipping the store repaints
 * everything.
 */

import { useAppStore } from '../stores/AppStore';
import { Icon } from './Icon';
import { IconButton } from './IconButton';

export function ThemeToggle() {
  const uiTheme = useAppStore((s) => s.uiTheme);
  const toggleTheme = useAppStore((s) => s.toggleTheme);
  const target = uiTheme === 'dark' ? 'light' : 'dark';

  return (
    <IconButton
      onClick={toggleTheme}
      // Toggle button with a stable name + pressed state (APG; doc §10.6): AT
      // announces the *current* theme ("Dark theme, pressed"), at parity with the
      // icon a sighted user sees — not just the action. `title` keeps the hover hint.
      aria-pressed={uiTheme === 'dark'}
      label="Dark theme"
      title={`Switch to ${target} theme`}
    >
      {uiTheme === 'dark' ? <Icon name="sun" size="md" /> : <Icon name="moon" size="md" />}
    </IconButton>
  );
}
