"use client";

import { MoonIcon, SunIcon } from "@/components/icons";
import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";
import { useTheme } from "@/lib/theme";
import { cn } from "@/lib/utils";

/**
 * The light/dark flip. Frutiger Aero has no such switch (the theme picker in
 * Settings owns it), so this renders nothing while aero is on — the state
 * comes from the shared store in lib/theme, so a change in Settings hides
 * this immediately.
 */
export function ThemeToggle({ className, plain = false }: { className?: string; plain?: boolean }) {
  const { theme, toggle } = useTheme();
  const { t } = useI18n();
  const dark = theme === "dark";

  if (theme === "aero") return null;

  return (
    <button
      type="button"
      onClick={() => {
        haptic("toggle");
        toggle();
      }}
      aria-label={dark ? t("common.switchToLight") : t("common.switchToDark")}
      title={dark ? t("common.lightMode") : t("common.darkMode")}
      className={cn(
        // A bordered chip with a press affordance: the bare sun/moon glyph was
        // easy to read as decoration rather than a control. `plain` drops the
        // chip chrome so a header can style the button itself (chat header).
        plain
          ? "text-[var(--text-muted)] transition hover:text-[var(--text)] active:scale-95"
          : "touch-target inline-flex size-9 items-center justify-center rounded-full border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] active:scale-95",
        className,
      )}
    >
      <span aria-hidden>{dark ? <SunIcon className="size-5" /> : <MoonIcon className="size-5" />}</span>
    </button>
  );
}