import React from 'react';

interface ParkLocationMapProps {
  latitude: number;
  longitude: number;
  parkName: string;
  className?: string;
}

export function ParkLocationMap({ latitude, longitude, parkName, className }: ParkLocationMapProps) {
  // Create OpenStreetMap iframe URL
  const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${longitude-0.01},${latitude-0.01},${longitude+0.01},${latitude+0.01}&layer=mapnik&marker=${latitude},${longitude}`;
  
  return (
    <div className={`w-full h-64 rounded-lg overflow-hidden border border-border ${className}`}>
      <iframe
        src={mapUrl}
        width="100%"
        height="100%"
        style={{ border: 'none' }}
        title={`Map of ${parkName}`}
        loading="lazy"
      />
    </div>
  );
}