"use client";
import React from "react";
import { MapContainer, MapContainerProps, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

export type MapProps = MapContainerProps;

export const Map: React.FC<MapProps> = (props) => {
    const {
        zoom = 12,
        children,
        ...rest
    } = props;

    return (
        <MapContainer
          {...rest}
          className="w-full h-full z-1"
          zoom={zoom}>
            <TileLayer
              url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
              subdomains={['a', 'b', 'c', 'd']} />

            {children}
        </MapContainer>
    );
};