import React from 'react';
import type { LocationData, RenderMarkerParams } from './types';
export interface MapViewProps {
    /**
     * Array of location data to display on the map.
     */
    locations: LocationData[];
    /**
     * ID of the currently selected location.
     */
    selectedId?: string;
    /**
     * ID of the currently active/hovered location.
     */
    activeId?: string;
    /**
     * Callback when a location marker is clicked.
     */
    onLocationSelect?: (id: string | undefined) => void;
    /**
     * Callback when a location becomes active/hovered.
     */
    onLocationActive?: (id: string | undefined) => void;
    /**
     * Default map center coordinates [latitude, longitude].
     * @default [37.7749, -122.4194] (San Francisco)
     */
    defaultCenter?: [number, number];
    /**
     * Default zoom level.
     * @default 12
     */
    defaultZoom?: number;
    /**
     * Marker style variant.
     * - 'pin': Traditional location pin markers for all states (29×43px)
     * - 'dot': Simple circular dot markers for all states (16×16px)
     * - 'hybrid': Dots for non-selected, pin for selected (recommended for dense layouts)
     * @default 'pin'
     */
    markerVariant?: 'pin' | 'dot' | 'hybrid';
    /**
     * Custom marker renderer function (global).
     * Applies to all locations unless overridden by LocationData.renderMarker.
     *
     * Follows industry-standard patterns from Material-UI DataGrid (renderCell),
     * Ant Design Table (render), and React Native Maps (renderMarker).
     *
     * Return a React element (SVG, component, etc.), which will be automatically
     * converted to a Leaflet DivIcon. The library handles all Leaflet integration.
     *
     * Return null to fall back to built-in markers for specific states.
     *
     * @example
     * ```tsx
     * // Basic custom marker
     * renderMarker={({ isSelected, color }) => (
     *   <CustomPinIcon selected={isSelected} color={color} />
     * )}
     *
     * // Hybrid mode support
     * renderMarker={({ variant, isSelected, color }) => (
     *   variant === 'pin'
     *     ? <CustomPinIcon selected={isSelected} color={color} />
     *     : <CustomDotIcon selected={isSelected} color={color} />
     * )}
     *
     * // Custom selected, default unselected (fallback pattern)
     * renderMarker={({ isSelected, color }) => {
     *   if (!isSelected) return null; // Use built-in marker
     *   return <CustomSelectedMarker color={color} />;
     * }}
     *
     * // Performance optimization (MUI pattern)
     * const renderMarker = useCallback((params) => (
     *   <CustomMarker {...params} />
     * ), []);
     * ```
     */
    renderMarker?: (params: RenderMarkerParams) => React.ReactElement | null;
    /**
     * Additional class name for the container.
     */
    className?: string;
    /**
     * Container style.
     */
    style?: React.CSSProperties;
    /**
     * Whether the Inspector panel is open.
     * When true, the map will pan to show the selected marker on the left side.
     */
    isInspectorOpen?: boolean;
    /**
     * Loading state - renders skeleton UI
     * @default false
     */
    loading?: boolean;
    /**
     * Error state - shows error message
     * @default false
     */
    error?: boolean;
    /**
     * Enable scroll wheel zoom on the map.
     * When true, uses native Leaflet scroll wheel zoom (best for full-screen maps).
     * When false, disables scroll wheel but enables custom pinch-to-zoom (best for embedded maps).
     * @default false
     */
    scrollWheelZoom?: boolean;
    /**
     * Show popup bubbles when markers are clicked.
     * When false, disables the Leaflet popup that appears on marker click.
     * Useful when you want to handle marker selection with external UI (e.g., a sidebar).
     * @default true
     */
    showPopup?: boolean;
}
export declare const MapView: React.FC<MapViewProps>;
//# sourceMappingURL=MapView.d.ts.map