import { useT } from "../../i18n";
import { setUiScale, UI_SCALES, useUiScale } from "../../lib/uiScale";

/** "Interface size" — Default / +10% / +20%, in the ⋯ menu's Mailbox display
 *  and in Settings → Appearance. Applies at once. */
export function UiScaleOption() {
  const t = useT();
  const scale = useUiScale();
  return (
    <div className="flex items-center justify-between gap-3 text-[14px] text-app-fg">
      <span>{t("display.size")}</span>
      <div role="radiogroup" aria-label={t("display.size")} className="flex gap-1 rounded-lg border border-app-border p-0.5">
        {UI_SCALES.map((value) => (
          <button
            key={value}
            type="button"
            role="radio"
            aria-checked={scale === value}
            onClick={() => setUiScale(value)}
            className={`rounded px-2.5 py-0.5 ${
              scale === value ? "bg-app-active font-medium text-app-fg" : "text-app-muted hover:bg-app-hover"
            }`}
          >
            {value === 1 ? t("display.sizeDefault") : `+${Math.round((value - 1) * 100)}%`}
          </button>
        ))}
      </div>
    </div>
  );
}