// src/components/MapView.tsx
import React from 'react';
import config from '../config';

interface MapViewProps {
  latitude: number;
  longitude: number;
}

export const MapView: React.FC<MapViewProps> = ({ latitude, longitude }) => {
  // Move config access inside component to allow for dynamic updates during tests/runtime
  const apiKey = config.google.mapsEmbedApiKey;

  if (!apiKey) {
    return (
      <div className="text-sm text-red-500">Map view is disabled: API key is not configured.</div>
    );
  }

  const mapSrc = `https://www.google.com/maps/embed/v1/view?key=${apiKey}&center=${latitude},${longitude}&zoom=14`;

  return (
    <div className="w-full h-64 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
      <iframe
        title="Map view"
        width="100%"
        height="100%"
        style={{ border: 0 }}
        loading="lazy"
        allowFullScreen
        src={mapSrc}
      ></iframe>
    </div>
  );
};