"use client";

import { useTheme, type Theme } from "@/lib/theme";
import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";

const OPTIONS: Array<{ id: Theme; labelKey: string }> = [
  { id: "light", labelKey: "common.lightMode" },
  { id: "dark", labelKey: "common.darkMode" },
  { id: "aero", labelKey: "theme.aero" },
];

/**
 * The theme picker: light, dark, or Frutiger Aero. Aero is not a dark/light
 * variant — it swaps the whole palette and scene — which is why the light/dark
 * toggles (header, rail, chat header) disappear while it is on.
 */
export function ThemeSection() {
  const { theme, setTheme } = useTheme();
  const { t } = useI18n();

  return (
    <section className="mb-4 space-y-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
      <h3 className="text-sm font-semibold text-frost-950 dark:text-frost-50">{t("settings.theme")}</h3>
      <div className="segmented" role="group" aria-label={t("settings.theme")}>
        {OPTIONS.map((option) => (
          <button
            key={option.id}
            type="button"
            aria-pressed={theme === option.id}
            onClick={() => {
              haptic("toggle");
              setTheme(option.id);
            }}
          >
            <span className="seg-label">{t(option.labelKey)}</span>
          </button>
        ))}
      </div>
      {theme === "aero" ? (
        <>
          <p className="text-[11px] leading-snug text-[var(--text-subtle)]">{t("theme.aeroNote")}</p>

        </>
      ) : null}
    </section>
  );
}