"use client";

import "leaflet/dist/leaflet.css";
import ReactDOMServer from "react-dom/server";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import { Icon } from "leaflet";

import PFRSamLogo from "@/components/common/sprites/pfr-sam-logo-sprite";

function MapComponent() {
  // leaflet doesn't support SVGs sprites - we need to convert it to a string.
  const svgString = ReactDOMServer.renderToStaticMarkup(<PFRSamLogo />);
  const svgUrl = `data:image/svg+xml,${encodeURIComponent(svgString)}`;

  const customIcon = new Icon({
    iconUrl: svgUrl,
    iconSize: [38, 95],
  });

  return (
    // given this map is purely decorative, it will remain hidden from assistive technologies
    <div role="presentation">
      <MapContainer
        attributionControl={false}
        center={[51.4524079, -2.5936903]}
        className="h-[500px] w-full rounded-xl z-0"
        scrollWheelZoom={false}
        zoom={16}
        zoomControl={false}
      >
        <TileLayer
          attribution="Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012"
          className="map-tiles"
          url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
        />
        <Marker
          alt="A marker for People for Research HQ"
          icon={customIcon}
          position={[51.4524079, -2.5936903]}
        >
          <Popup>
            <p className="font-inter font-extrabold tracking-tight text-sm">
              People for Research HQ
            </p>
            <span className="font-noto text-sm">
              Suite 302, QC30, Queen Charlotte St, Bristol BS1 4HJ, United
              Kingdom
            </span>
            <div className="font-noto text-sm mt-2">
              <span className="font-noto text-sm">+44 117 921 0008</span>
              <p className="mb-1">
                <span className="font-bold">Opening hours:</span>
              </p>
              <ul>
                <li>Monday-Thursday: 9AM - 5:30PM</li>
                <li>Friday: 9AM - 5PM</li>
                <li>Saturday-Sunday: Closed</li>
              </ul>
            </div>
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

export default MapComponent;