"use client";

import dynamic from "next/dynamic";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

// Lazy load map components
const TourMap = dynamic(
  () => import("@/components/maps/tour-map").then((mod) => ({ default: mod.TourMap })),
  {
    loading: () => (
      <div className="h-[400px] bg-muted animate-pulse rounded-lg flex items-center justify-center">
        <div className="text-muted-foreground">Loading map...</div>
      </div>
    ),
    ssr: false,
  }
);

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

interface PreviewMapProps {
  latitude: number;
  longitude: number;
  meetingPoint?: string | null;
}

export function PreviewMap({ latitude, longitude, meetingPoint }: PreviewMapProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Meeting Point</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <TourMap
          latitude={latitude}
          longitude={longitude}
          height="400px"
        />
        {meetingPoint && (
          <p className="text-sm text-muted-foreground">
            <strong>Address:</strong> {meetingPoint}
          </p>
        )}
        <DirectionsButton
          latitude={latitude}
          longitude={longitude}
          className="w-full"
        />
      </CardContent>
    </Card>
  );
}