import type { ComponentType } from "preact";
import { theme, setTheme } from "../theme-state.ts";
import * as ui from "@exosphere/client/ui.css";

type IconComponent = ComponentType<{ size: string | number }>;

interface ThemeToggleProps {
  icons: Record<"light" | "dark" | "system", IconComponent>;
}

const themeOptions = ["light", "dark", "system"] as const;
const labels: Record<(typeof themeOptions)[number], string> = {
  light: "Light",
  dark: "Dark",
  system: "System",
};

export function ThemeToggle({ icons }: ThemeToggleProps) {
  const current = theme.value;

  return (
    <div class={ui.themeToggle} role="radiogroup" aria-label="Theme">
      {themeOptions.map((value) => {
        const Icon = icons[value];
        return (
          <button
            key={value}
            class={`${ui.themeToggleBtn} ${current === value ? ui.themeToggleBtnActive : ""}`}
            onClick={() => setTheme(value)}
            role="radio"
            aria-checked={current === value}
            aria-label={labels[value]}
            title={labels[value]}
          >
            <Icon size={16} />
          </button>
        );
      })}
    </div>
  );
}