/* Usage logs — 對齊 UsageLogsPage.vue */

function UsagePage({ navigate, onBack }) {
  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 }}>API 用量統計</div>
            <p className="card-subtitle" style={{ marginBottom: 8 }}>近期點數消耗</p>
            {SEED_USAGE.map((u) => (
              <div key={u.id} className="usage-row">
                <div>
                  <div className="usage-title">{u.title}</div>
                  <div className="usage-time">{u.time}</div>
                </div>
                <div className="usage-cost">{u.cost} 點</div>
              </div>
            ))}
          </ZenCard>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { UsagePage });