import type { UiTheme } from "../theme";
import { getNextUiTheme } from "../theme";
import { IconGlyph } from "./IconGlyph";

export interface ThemeToggleProps {
  theme: UiTheme;
  onThemeChange: (theme: UiTheme) => void;
}

export function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
  const nextTheme = getNextUiTheme(theme);

  return (
    <button
      aria-label="Light theme"
      aria-pressed={theme === "light"}
      className="theme-toggle"
      data-ui-theme-current={theme}
      data-ui-theme-toggle="true"
      onClick={() => onThemeChange(nextTheme)}
      type="button"
    >
      <span className="theme-toggle__label">Theme</span>
      <span className="theme-toggle__switch" aria-hidden="true">
        <span className="theme-toggle__cell" data-active={theme === "dark"}>
          <IconGlyph name="mdi:weather-night" size="sm" />
          <span>Dark</span>
        </span>
        <span className="theme-toggle__cell" data-active={theme === "light"}>
          <IconGlyph name="mdi:white-balance-sunny" size="sm" />
          <span>Light</span>
        </span>
      </span>
    </button>
  );
}