// @design-system: domain/MapView
// Wave 6: Lazy wrapper around MapViewInner (react-leaflet chunk).
// MapViewInner is dynamically imported so Leaflet never enters the /deals bundle.

'use client';

import { lazy, Suspense } from 'react';
import type { FeedMarker } from '@/server/db/queries/feed.js';
import { Spinner } from '@/components/ui/feedback/Spinner';
import { useT } from '@/lib/i18n/react';

const MapViewInner = lazy(() => import('./MapViewInner'));

export interface MapViewProps {
  deals: FeedMarker[];
  center: { lat: number; lng: number };
  radius?: number;
  /** Called after every user pan or zoom with the new visible viewport. */
  onViewportChange?: (viewport: { lat: number; lng: number; km: number }) => void;
}

/**
 * MapView — lazy-loaded react-leaflet map for the Near-You feature.
 *
 * Leaflet and markercluster are in a separate dynamic chunk so they do not
 * inflate the /deals bundle. First render within <Suspense> shows a centered
 * spinner while the chunk loads (~80 KB gz).
 *
 * @example
 * ```tsx
 * <MapView deals={deals} center={{ lat: 32.08, lng: 34.78 }} radius={10} />
 * ```
 */
export function MapView(props: MapViewProps) {
  const t = useT('domain_map');
  return (
    <Suspense
      fallback={
        <div
          role="region"
          aria-label={t('loading_map_aria_label')}
          className="bg-surface-subtle flex h-96 items-center justify-center rounded-xl"
        >
          <Spinner />
        </div>
      }
    >
      <MapViewInner {...props} />
    </Suspense>
  );
}