"use client";

import dynamic from "next/dynamic";
import { MapPin } from "lucide-react";

// Lazy load map components for better performance
const TourMap = dynamic(
  () => import("@/components/maps/tour-map").then((mod) => ({ default: mod.TourMap })),
  {
    loading: () => (
      <div className="h-96 bg-muted animate-pulse rounded-lg flex items-center justify-center">
        <MapPin className="h-8 w-8 text-muted-foreground animate-bounce" />
      </div>
    ),
    ssr: false,
  }
);

const DirectionsButton = dynamic(
  () => import("@/components/maps/directions-button").then((mod) => ({ default: mod.DirectionsButton })),
  {
    loading: () => <div className="h-10 w-32 bg-muted animate-pulse rounded-md" />,
    ssr: false,
  }
);

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

export function TourMapPreview({ latitude, longitude }: TourMapPreviewProps) {
  return (
    <div className="space-y-4">
      <TourMap
        latitude={latitude}
        longitude={longitude}
      />
      <div className="flex justify-center">
        <DirectionsButton
          latitude={latitude}
          longitude={longitude}
        />
      </div>
    </div>
  );
}