import L from 'leaflet';
import type { CityStatus } from '@citytracker/shared';

export function cityMarkerIcon(status: CityStatus): L.DivIcon {
  const color = status === 'visited' ? '#2f9e44' : '#1971c2';
  return L.divIcon({
    className: 'city-marker',
    html: `<span class="marker-pin" style="background:${color}"></span>`,
    iconSize: [22, 22],
    iconAnchor: [11, 11],
    popupAnchor: [0, -14],
  });
}