import L from 'leaflet';

/**
 * SVG icon for single-unit houses
 * Shows a peaked roof with walls and door
 */
export function houseSvg(color: string, size: number = 26): string {
  return `
    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24">
      <!-- House with peaked roof -->
      <path d="M12 3L4 10v10a1 1 0 001 1h4v-6h6v6h4a1 1 0 001-1V10z"
            fill="${color}"
            stroke="rgba(0,0,0,0.3)"
            stroke-width="0.5"/>
      <path d="M12 3L4 10h16z"
            fill="${color}"
            stroke="rgba(0,0,0,0.3)"
            stroke-width="0.5"/>
    </svg>
  `;
}

/**
 * SVG icon for multi-unit apartment buildings
 * Shows a rectangular building with windows and door
 */
export function apartmentSvg(color: string, size: number = 26): string {
  return `
    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24">
      <!-- Rectangular building -->
      <rect x="4" y="3" width="16" height="18" rx="1"
            fill="${color}"
            stroke="rgba(0,0,0,0.3)"
            stroke-width="0.5"/>
      <!-- Windows grid (2x2) -->
      <rect x="7" y="6" width="3" height="2.5" rx="0.3" fill="rgba(255,255,255,0.5)"/>
      <rect x="14" y="6" width="3" height="2.5" rx="0.3" fill="rgba(255,255,255,0.5)"/>
      <rect x="7" y="11" width="3" height="2.5" rx="0.3" fill="rgba(255,255,255,0.5)"/>
      <rect x="14" y="11" width="3" height="2.5" rx="0.3" fill="rgba(255,255,255,0.5)"/>
      <!-- Door -->
      <rect x="10" y="16" width="4" height="5" rx="0.3" fill="rgba(255,255,255,0.4)"/>
    </svg>
  `;
}

/**
 * Creates a Leaflet DivIcon for a location marker
 * @param color - Fill color for the icon (based on support level)
 * @param isMultiUnit - Whether this is a multi-unit building (apartment) or single-unit (house)
 * @param size - Icon size in pixels (default 26)
 */
export function createLocationIcon(
  color: string,
  isMultiUnit: boolean,
  size: number = 26
): L.DivIcon {
  const svgHtml = isMultiUnit
    ? apartmentSvg(color, size)
    : houseSvg(color, size);

  return L.divIcon({
    html: svgHtml,
    iconSize: [size, size],
    iconAnchor: [size / 2, size / 2],
    popupAnchor: [0, -size / 2],
    className: 'location-icon-marker',
  });
}
