/* Settings — 對齊 SettingsPage.vue */

function SettingsPage({ navigate, onBack }) {
  const [lang, setLang] = React.useState("zh-TW");
  const langs = [
    { id: "zh-TW", name: "繁體中文", code: "zh-TW" },
    { id: "zh-CN", name: "简体中文", code: "zh-CN" },
    { id: "en-US", name: "English", code: "en-US" },
  ];

  return (
    <div className="zen-page">
      <PageHeader title="設定" onBack={onBack || (() => navigate("/me"))} />
      <div className="zen-content">
        <div className="content-wrapper">
          <ZenCard>
            <div className="card-title" style={{ marginBottom: 6 }}>語言</div>
            <p className="card-subtitle" style={{ marginBottom: 14 }}>選擇介面語言</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {langs.map((l) => (
                <button
                  key={l.id}
                  type="button"
                  className={`language-btn${lang === l.id ? " active" : ""}`}
                  onClick={() => setLang(l.id)}
                >
                  <div className="language-info">
                    <span className="language-name">{l.name}</span>
                    <span className="language-code">{l.code}</span>
                  </div>
                  {lang === l.id ? <Icon name="check" size={18} /> : null}
                </button>
              ))}
            </div>
          </ZenCard>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SettingsPage });