import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';

const Map = () => {
  return (
    <Container>
      <Row>
        <Col xs={12}>
          <div id="map" style={{ height: '400px', width: '100%' }} />
        </Col>
      </Row>
    </Container>
  );
};

Map.getInitialProps = async () => {
  const API_KEY = 'AIzaSyApd2QKzSsWnlD7q99lNngynLN2zYreGN8';

  const location = {
    lat: 40.663887,
    lng: 16.604882,
  };

  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=initMap`;
  script.async = true;
  script.defer = true;
  document.body.appendChild(script);

  // Initialize and center the map on the location
  window.initMap = () => {
    const map = new window.google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: location,
    });

    // Add a marker to the map
    new window.google.maps.Marker({
      position: location,
      map,
    });
  };

  return {};
};

export default Map;