"use client";

import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";
import type { StyleFunction } from "leaflet";
import "leaflet/dist/leaflet.css";

export default function LeafletMap({
  dataWilayah,
  styleWilayah,
  onEachWilayah,
}: {
  dataWilayah: any;
  styleWilayah: StyleFunction;
  onEachWilayah: any;
}) {
  return (
    <MapContainer
      center={[-2, 118]}
      zoom={5}
      scrollWheelZoom={false}
      className="w-full h-full"
    >
      <TileLayer
        attribution="&copy; OpenStreetMap"
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />

      <GeoJSON
        data={dataWilayah}
        style={styleWilayah}
        onEachFeature={onEachWilayah}
      />
    </MapContainer>
  );
}