import { useTheme } from '../context/ThemeContext.jsx';

const OPTIONS = [
  { mode: 'light',  icon: '☀',  label: 'Clair'   },
  { mode: 'dark',   icon: '☾',  label: 'Sombre'  },
  { mode: 'system', icon: '◐',  label: 'Système' },
];

export default function ThemeSwitcher() {
  const { mode, setMode } = useTheme();
  return (
    <div className="theme-switcher" role="group" aria-label="Thème">
      {OPTIONS.map(o => (
        <button
          key={o.mode}
          type="button"
          className={mode === o.mode ? 'active' : ''}
          onClick={() => setMode(o.mode)}
          title={o.label}
          aria-pressed={mode === o.mode}
        >
          <span aria-hidden="true">{o.icon}</span>
          <span>{o.label}</span>
        </button>
      ))}
    </div>
  );
}