"use client";

import dynamic from "next/dynamic";
import { MapPin } from '@/lib/icons';
import type { Property } from "@/lib/appwrite/schema";

const Inner = dynamic(
  () =>
    import("./properties-map-view-inner").then((m) => m.PropertiesMapViewInner),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-full items-center justify-center rounded-lg border bg-muted/30">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <MapPin className="size-4 animate-pulse" />
          Harita yükleniyor...
        </div>
      </div>
    ),
  },
);

interface Props {
  properties: Property[];
  selectedId?: string | null;
  onSelect: (id: string) => void;
}

export function PropertiesMapView(props: Props) {
  return (
    <div className="h-full w-full">
      <Inner {...props} />
    </div>
  );
}
