import React, { FC } from 'react';
import { MapContainer, Marker, TileLayer } from 'react-leaflet';
import { LatLngExpression } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { tileLayerProps } from '../../../utils/map';
import { marker } from '../../../utils/mapMarkers';

interface SchoolLocationMapProps {
  position: LatLngExpression;
}

const SchoolLocationMap: FC<SchoolLocationMapProps> = ({ position }) => (
  <MapContainer center={position} zoom={13} className="w-full h-full rounded">
    <TileLayer {...tileLayerProps} />
    <Marker position={position} icon={marker} />
  </MapContainer>
);

export default SchoolLocationMap;