"use client";

import Map, { Marker, NavigationControl } from "react-map-gl/mapbox";
import { MapPin } from "lucide-react";
import "mapbox-gl/dist/mapbox-gl.css";

interface TourMapProps {
  latitude: number;
  longitude: number;
  zoom?: number;
  height?: string;
  showLabel?: boolean;
}

export function TourMap({ 
  latitude, 
  longitude, 
  zoom = 14, 
  height = "300px", 
  showLabel = true 
}: TourMapProps) {
  const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN;

  if (!mapboxToken) {
    return (
      <div 
        style={{ height }} 
        className="rounded-lg overflow-hidden bg-muted flex items-center justify-center"
      >
        <div className="text-center p-4">
          <MapPin className="w-12 h-12 mx-auto text-muted-foreground mb-2" />
          <p className="text-sm text-muted-foreground">
            Map configuration required
          </p>
        </div>
      </div>
    );
  }

  return (
    <div style={{ height }} className="rounded-lg overflow-hidden relative">
      <Map
        initialViewState={{
          longitude,
          latitude,
          zoom,
        }}
        style={{ width: '100%', height: '100%' }}
        mapStyle="mapbox://styles/mapbox/streets-v12"
        mapboxAccessToken={mapboxToken}
      >
        <NavigationControl />
        
        {/* Meeting Point Marker */}
        <Marker longitude={longitude} latitude={latitude}>
          <div className="relative flex flex-col items-center">
            <MapPin className="w-10 h-10 text-red-500 fill-red-500 drop-shadow-lg" />
            {showLabel && (
              <div className="absolute -bottom-7 whitespace-nowrap bg-white px-2 py-1 rounded shadow-lg text-xs font-semibold border border-gray-200">
                Meeting Point
              </div>
            )}
          </div>
        </Marker>
      </Map>
    </div>
  );
}