import React, { useState } from "react";
import { GoogleMap, LoadScript, Marker, InfoWindow } from "@react-google-maps/api";

// Example locations (you can replace with Strapi data or your own list)
const locations = [
  { id: 1, name: "Location One", lat: 25.276987, lng: 55.296249 },
  { id: 2, name: "Location Two", lat: 25.204849, lng: 55.270783 },
  { id: 3, name: "Location Three", lat: 25.197197, lng: 55.274376 },
];

const containerStyle = {
  width: "100%",
  height: "600px",
};

const center = {
  lat: 25.276987,
  lng: 55.296249,
};

const GoogleMapComponent: React.FC = () => {
  const [selected, setSelected] = useState<any>(null);

  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ""}>
      <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={12}>
        {locations.map((loc) => (
          <Marker
            key={loc.id}
            position={{ lat: loc.lat, lng: loc.lng }}
            onClick={() => setSelected(loc)}
          />
        ))}

        {selected && (
          <InfoWindow
            position={{ lat: selected.lat, lng: selected.lng }}
            onCloseClick={() => setSelected(null)}
          >
            <div>
              <h4>{selected.name}</h4>
              <p>Lat: {selected.lat}, Lng: {selected.lng}</p>
            </div>
          </InfoWindow>
        )}
      </GoogleMap>
    </LoadScript>
  );
};

export default GoogleMapComponent;