import { FaMapPin } from 'react-icons/fa';
import { renderToStaticMarkup } from 'react-dom/server';
import { divIcon } from 'leaflet';
import L from 'leaflet';

export const defaultIcon = new L.Icon({
  iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
});

const pointIconSVG = renderToStaticMarkup(<FaMapPin style={{ fontSize: '24px', color: '#ff4500', zIndex: '1' }} />);
export const pointIconRed = divIcon({
  className: 'custom-icon',
  html: `<div style="display: flex; align-items: center; justify-content: center;">${pointIconSVG}</div>`,
  iconSize: [30, 30],
  iconAnchor: [15, 30],
  popupAnchor: [0, -30],
});

const pointIconGreenSVG = renderToStaticMarkup(<FaMapPin style={{ fontSize: '24px', color: '#1ed013', zIndex: '1' }} />);
export const pointIconGreen = divIcon({
  className: 'custom-icon',
  html: `<div style="display: flex; align-items: center; justify-content: center;">${pointIconGreenSVG}</div>`,
  iconSize: [30, 30],
  iconAnchor: [15, 30],
  popupAnchor: [0, -30],
});

const pointIconBlueSVG = renderToStaticMarkup(<FaMapPin style={{ fontSize: '24px', color: '#0000ff', zIndex: '1' }} />);
export const pointIconBlue = divIcon({
  className: 'custom-icon',
  html: `<div style="display: flex; align-items: center; justify-content: center;">${pointIconBlueSVG}</div>`,
  iconSize: [30, 30],
  iconAnchor: [15, 30],
  popupAnchor: [0, -30],
});
