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);
  const label = `Switch to ${nextTheme} theme`;

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