class OverallStats {
  constructor(statsEl) {
    this._el = statsEl;
  }

  render(summary) {
    const finished = summary.finished_games || 0;
    const wins = summary.wins || 0;
    const winRate = finished > 0 ? ((wins / finished) * 100).toFixed(1) + "%" : "-";
    const items = [
      ["Games", summary.total_games || 0],
      ["Finished", finished],
      ["Wins", wins],
      ["Losses", summary.losses || 0],
      ["Win Rate", winRate],
      ["Avg Turns", summary.avg_turns_finished || 0],
    ];
    this._el.innerHTML = items.map(([k, v]) => (
      `<div class="stat"><span class="k">${k}</span><span class="v">${v}</span></div>`
    )).join("");
  }
}