"use client";

import dynamic from "next/dynamic";
import type { Site, VehicleMaster } from "@/lib/fleet/types";

const FleetMapInner = dynamic(
  () => import("@/components/map/fleet-map").then((m) => m.FleetMap),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-[360px] items-center justify-center rounded-sm border border-[var(--line)] bg-[var(--surface)] text-sm text-[var(--muted)]">
        Karte wird geladen…
      </div>
    ),
  },
);

export function FleetMapLazy(props: {
  vehicles: VehicleMaster[];
  sites: Site[];
  height?: number;
}) {
  return <FleetMapInner {...props} />;
}