"use client";

import { Marker, Popup } from "react-leaflet";
import { MapShell, pointIcon } from "@/components/map/map-shell";

export interface TitikPeta {
  id: number;
  nama: string;
  kategori: string | null;
  lat: number | string;
  lng: number | string;
  keterangan: string | null;
}

export default function PemetaanMap({
  titik,
  pusat,
  zoom,
  layerId,
}: {
  titik: TitikPeta[];
  pusat: [number, number];
  zoom: number;
  layerId: string;
}) {
  return (
    <MapShell center={pusat} zoom={zoom} layerId={layerId}>
      {titik.map((row) => (
        <Marker
          key={row.id}
          position={[Number(row.lat), Number(row.lng)]}
          icon={pointIcon("#0f766e")}
        >
          <Popup>
            <strong>{row.nama}</strong>
            <br />
            {row.kategori ?? "Lokasi"}
            {row.keterangan ? (
              <>
                <br />
                {row.keterangan}
              </>
            ) : null}
          </Popup>
        </Marker>
      ))}
    </MapShell>
  );
}