"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 keeps the same control in the same
 * spot: it has no dark variant of its own, so from Aero the moon flips to
 * Dark (the theme picker in Settings is how Aero comes back) — the toggle
 * used to disappear there, which left the chat header and the rail with no
 * theme control at all.
 */
export function ThemeToggle({ className, plain = false }: { className?: string; plain?: boolean }) {
  const { theme, toggle } = useTheme();
  const { t } = useI18n();
  const dark = theme === "dark";

  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>
  );
}