import { useSettingsStore } from '@/store/settings.ts';

const themes = [
  { key: 'light' as const, icon: '\u2600\uFE0F', label: 'Light' },
  { key: 'dark' as const, icon: '\uD83C\uDF19', label: 'Dark' },
  { key: 'system' as const, icon: '\uD83D\uDCBB', label: 'System' },
];

export default function ThemeToggle() {
  const theme = useSettingsStore((s) => s.theme);
  const setTheme = useSettingsStore((s) => s.setTheme);

  return (
    <div className="flex items-center gap-0.5 bg-slate-700 dark:bg-slate-800 rounded-lg p-0.5">
      {themes.map((t) => (
        <button
          key={t.key}
          onClick={() => setTheme(t.key)}
          className={`px-2 py-1 rounded text-xs transition-all
            ${
              theme === t.key
                ? 'bg-slate-500 dark:bg-slate-600 shadow-sm'
                : 'hover:bg-slate-600 dark:hover:bg-slate-700'
            }`}
          title={t.label}
        >
          {t.icon}
        </button>
      ))}
    </div>
  );
}
