import { ApiOutlined, DatabaseOutlined, KeyOutlined, SettingOutlined } from "@ant-design/icons";

function SettingsPage() {
  return (
    <section className="settings-page page-motion" aria-label="服务设置">
      <main className="settings-page__shell">
        <header className="settings-page__head">
          <span>
            <SettingOutlined />
            管理中心
          </span>
          <h1>服务设置</h1>
          <p>集中管理服务连接、密钥池与资源调用配置。</p>
        </header>

        <div className="settings-page__grid">
          <article>
            <ApiOutlined />
            <div>
              <strong>服务连接</strong>
              <span>服务器已连接，当前使用本地预览配置。</span>
            </div>
            <button type="button">检查连接</button>
          </article>
          <article>
            <KeyOutlined />
            <div>
              <strong>密钥池</strong>
              <span>7 个 Provider 可用，支持统一调度。</span>
            </div>
            <button type="button">管理密钥</button>
          </article>
          <article>
            <DatabaseOutlined />
            <div>
              <strong>调用记录</strong>
              <span>记录模型、状态、耗时与积分消耗。</span>
            </div>
            <button type="button">查看记录</button>
          </article>
        </div>
      </main>
    </section>
  );
}

export default SettingsPage;
