SubletMapContent.tsx

"use client";

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

interface Props {
  latitude: number;
  longitude: number;
}

const CIRCLE_RADIUS_METERS = 200;

export const SubletMapContent = ({ latitude, longitude }: Props) => {
  return (
    <MapContainer
      center={[latitude, longitude]}
      zoom={15}
      scrollWheelZoom={false}
      className="z-0 h-72 w-full rounded-lg sm:h-80"
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Circle
        center={[latitude, longitude]}
        radius={CIRCLE_RADIUS_METERS}
        pathOptions={{
          color: "#3b82f6",
          fillColor: "#3b82f6",
          fillOpacity: 0.2,
          weight: 2,
        }}
      />
    </MapContainer>
  );
};