import { useState } from "react";
import { applyTheme, effectiveDark, readTheme, saveTheme, type Theme } from "./theme.ts";
import { IconMoon, IconSun } from "./icons.tsx";

export function ThemeSwitch() {
  const [theme, setTheme] = useState<Theme>(readTheme);
  const dark = effectiveDark(theme);
  const toggle = () => {
    const next: Theme = dark ? "light" : "dark";
    saveTheme(next);
    applyTheme(next);
    setTheme(next);
  };
  return (
    <button type="button" role="switch" aria-checked={dark} aria-label="Тёмная тема" className="ui-theme" onClick={toggle}>
      <span className="ui-theme__knob">{dark ? <IconMoon size={16} /> : <IconSun size={16} />}</span>
    </button>
  );
}