import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  Polyline,
} from "react-leaflet";

const MapView = ({ startCoords, endCoords, route }) => {
  return (
    <MapContainer
      center={[55.7558, 37.6173]}
      zoom={5}
      style={{ height: "400px", width: "100%" }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      {startCoords && (
        <Marker position={[startCoords.lat, startCoords.lng]}>
          <Popup>Пункт отправления</Popup>
        </Marker>
      )}
      {endCoords && (
        <Marker position={[endCoords.lat, endCoords.lng]}>
          <Popup>Пункт назначения</Popup>
        </Marker>
      )}
      {route.length > 0 && <Polyline positions={route} color="blue" />}
    </MapContainer>
  );
};

export default MapView;