import { GameConfig } from "./config.js";

/**
 * @param {{ worldMapEl: HTMLElement }} ctx
 */
export function renderCities(ctx) {
  const cities = GameConfig.WorldMap?.Cities ?? [];
  for (const city of cities) {
    const cityEl = document.createElement("div");
    cityEl.className = "world-map-city";
    cityEl.style.left = `${city.x}%`;
    cityEl.style.top = `${city.y}%`;
    const maxVisitors = city.maxVisitorsTowardZoos ?? 0;
    cityEl.title = maxVisitors > 0 ? `${city.name} — max ${maxVisitors} visiteurs vers zoos` : city.name;
    cityEl.setAttribute("aria-label", maxVisitors > 0 ? `${city.name}, ${maxVisitors} visiteurs max vers zoos` : city.name);
    const icon = document.createElement("span");
    icon.setAttribute("aria-hidden", "true");
    icon.textContent = "🏙️";
    cityEl.appendChild(icon);
    const cityLabel = document.createElement("div");
    cityLabel.className = "world-map-city-label";
    cityLabel.textContent = city.name;
    cityEl.appendChild(cityLabel);
    if (maxVisitors > 0) {
      const cityMax = document.createElement("div");
      cityMax.className = "world-map-city-max-visitors";
      cityMax.textContent = `max ${maxVisitors}`;
      cityMax.setAttribute("aria-hidden", "true");
      cityEl.appendChild(cityMax);
    }
    ctx.worldMapEl.appendChild(cityEl);
  }
}