import { useEffect, useRef } from "react";

const GoogleMapInput = ({ id, placeholder, onPlaceChanged }:any) => {
  const inputRef = useRef(null);
  useEffect(() => {
    if (typeof google !== "undefined") {
      const autocomplete = new google.maps.places.Autocomplete(inputRef.current, {
        types: ['geocode'], 
        componentRestrictions: { country: 'US' },
      });

      autocomplete.addListener("place_changed", () => {
        const place = autocomplete.getPlace();
        if (place && place.geometry) {
          onPlaceChanged(place);
        }
      });
    }
  }, [onPlaceChanged]);

  return (
    <input
      ref={inputRef}
      type="text"
      className="pickupInput dark"
      placeholder={placeholder}
      id={id}
    />
  );
};

export default GoogleMapInput;