import React, { useState, useEffect } from "react";
import GoogleMapReact from "google-map-react";
import { IoIosPin } from "react-icons/io";

const Marker = ({ lat, lng }: { lat: number; lng: number }) => (

);

const Map = ({
onSubmitLocation,
}: {
onSubmitLocation?: (location: { lat: number; lng: number }) => void;
}) => {
const [center, setCenter] = useState({ lat: 0, lng: 0 });
const [marker, setMarker] = useState<{
lat: number | null;
lng: number | null;
}>({ lat: null, lng: null });

useEffect(() => {
navigator.geolocation.getCurrentPosition(
(position) => {
setCenter({
lat: position.coords.latitude,
lng: position.coords.longitude,
});
},
(error) => {
console.error("Error obtaining location", error);
setCenter({ lat: 0, lng: 0 });
}
);
}, []);

const handleMapClick = ({
lat,
lng,
}: {
lat: number | null;
lng: number | null;
}) => {
setMarker({ lat, lng });
onSubmitLocation && lat && lng && onSubmitLocation({ lat, lng });
};

return (
<div style={{ height: "60vh", width: "100%" }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "API_KEY" }}
center={center}
defaultZoom={11}
onClick={handleMapClick}
options={{
disableDefaultUI: true,
zoomControl: true,
draggableCursor: "pointer",
}}
>
{marker.lat && marker.lng && (

)}

{marker.lat} {marker.lng}

export default Map;