import type { MapProjection } from "../geometry/mapProjection";

// Draws the lat/lon graticule (30° grid) over OSM tiles.
export function drawBaseMap(ctx: CanvasRenderingContext2D, projection: MapProjection): void {
  ctx.save();
  ctx.strokeStyle = "rgba(255, 255, 255, 0.10)";
  ctx.lineWidth = 0.5;
  ctx.beginPath();

  for (let lon = -180; lon <= 180; lon += 30) {
    const top = projection.project({ lon, lat: 82 });
    const bottom = projection.project({ lon, lat: -82 });
    ctx.moveTo(top.x, top.y);
    ctx.lineTo(bottom.x, bottom.y);
  }

  for (let lat = -60; lat <= 60; lat += 30) {
    const left = projection.project({ lon: -180, lat });
    const right = projection.project({ lon: 180, lat });
    ctx.moveTo(left.x, left.y);
    ctx.lineTo(right.x, right.y);
  }

  ctx.stroke();
  ctx.restore();
}
