"use client";

import dynamic from "next/dynamic";

export type DiscoverMapMarker = {
  id: string;
  slug: string;
  businessName: string;
  city: string;
  province: string;
  latitude: number;
  longitude: number;
};

const InteractiveDiscoverMap = dynamic(
  () => import("./InteractiveDiscoverMap"),
  {
    ssr: false,
    loading: () => (
      <section className="discover-map-stage">
        <div className="discover-map-loading">Cargando mapa real...</div>
      </section>
    )
  }
);

export default function InteractiveDiscoverMapClient({
  markers,
  selectedMarkerId,
  onSelectMarker,
  onApplyVisibleArea,
  focusRequest
}: {
  markers: DiscoverMapMarker[];
  selectedMarkerId?: string;
  onSelectMarker: (makerId: string) => void;
  onApplyVisibleArea: (makerIds: string[]) => void;
  focusRequest: number;
}) {
  return (
    <InteractiveDiscoverMap
      markers={markers}
      selectedMarkerId={selectedMarkerId}
      onSelectMarker={onSelectMarker}
      onApplyVisibleArea={onApplyVisibleArea}
      focusRequest={focusRequest}
    />
  );
}