import { Switch } from "~/components/ui/switch.tsx";
import { setUiPref, useUiPrefs } from "~/lib/ui-prefs.ts";
import { SettingsBlock } from "./settings-block.tsx";

// 界面:本机显示偏好(存浏览器,不进 settings 表)

export function InterfaceSection() {
  const prefs = useUiPrefs();
  return (
    <SettingsBlock section="interface" anchor="display" title="显示">
      <div className="flex items-start justify-between gap-4">
        <div className="min-w-0">
          <p className="text-sm font-medium text-foreground" id="ui-techinfo-label">
            默认展开技术信息
          </p>
          <p className="mt-1 text-caption text-muted-foreground">
            ID、hash、token 数、耗时和原始错误码平时收在「技术信息」里。开启后各页默认展开。
          </p>
        </div>
        <Switch
          aria-labelledby="ui-techinfo-label"
          checked={prefs.techInfoExpanded}
          onCheckedChange={(v) => setUiPref("techInfoExpanded", v)}
        />
      </div>
    </SettingsBlock>
  );
}