Map

import { useRef, useState } from 'react';
import { Text, View } from 'react-native';

import {
  Map,
  MapCallout,
  MapCircle,
  MapLocateControl,
  MapMarker,
  MapMarkerClusterGroup,
  MapSearchAreaControl,
  MapTypeControl,
  MapZoomControl,
  regionFromCenter,
  type MapBounds,
  type MapHandle
} from '@/components/docyrus-native/map';

const center = { latitude: 41.0082, longitude: 28.9784 };

export function StoresMap({ stores }: { stores: Array<{ id: string; name: string; latitude: number; longitude: number }> }) {
  const mapRef = useRef<MapHandle>(null);
  const [bounds, setBounds] = useState<MapBounds | null>(null);
  const [applied, setApplied] = useState<MapBounds | null>(null);

  return (
    <Map
      ref={mapRef}
      initialRegion={regionFromCenter(center, 11)}
      fitToCoordinates={stores}
      onRegionChangeComplete={(_, details) => setBounds(details.bounds)}
      onLongPress={coordinate => console.log('drop pin', coordinate)}
      className="h-[360px]">
      <MapMarkerClusterGroup>
        {stores.map(store => (
          <MapMarker key={store.id} id={store.id} coordinate={store}>
            <View className="rounded-full bg-primary px-2 py-1">
              <Text className="text-[11px] font-semibold text-primary-foreground">{store.name}</Text>
            </View>
            <MapCallout>
              <Text className="font-semibold text-popover-foreground">{store.name}</Text>
            </MapCallout>
          </MapMarker>
        ))}
      </MapMarkerClusterGroup>

      <MapCircle center={center} radius={1500} />

      <MapZoomControl />
      <MapTypeControl />
      <MapLocateControl />
      <MapSearchAreaControl
        visible={JSON.stringify(bounds) !== JSON.stringify(applied)}
        onPress={() => setApplied(bounds)} />
    </Map>
  );
}

<Map
  latitude={41.0082}
  longitude={28.9784}
  zoom={12}
  markers={[{ latitude: 41.0082, longitude: 28.9784, title: 'Istanbul' }]}
  onMarkerPress={(index, marker) => console.log(index, marker.title)}
  className="h-[240px]" />