Implement a details display box on the map

src/screens/Map.tsx

@@ -26,7 +26,7 @@ const DEFAULT_REGION: Region = {
 
 /* ---------------- MOCK DATA ---------------- */
 
-const generateProperties = (count = 2000) =>
+const generateProperties = (count = 1500) =>
   Array.from({ length: count }).map((_, i) => ({
     id: `${i}`,
     lat: 47.5 + Math.random() * 0.25,
@@ -36,7 +36,7 @@ const generateProperties = (count = 2000) =>
     baths: Math.floor(1 + Math.random() * 4),
   }));
 
-const properties = generateProperties(2000);
+const properties = generateProperties();
 
 /* ---------------- HELPERS ---------------- */
 
@@ -46,13 +46,13 @@ const formatPrice = (value: number) => {
   return value.toString();
 };
 
-/* ---------------- PRICE MARKER (FIXED) ---------------- */
+/* ---------------- PRICE MARKER ---------------- */
 
 const PriceMarker = ({ item, onPress }: any) => {
   const [tracks, setTracks] = useState(true);
 
   useEffect(() => {
-    const t = setTimeout(() => setTracks(false), 400);
+    const t = setTimeout(() => setTracks(false), 300);
     return () => clearTimeout(t);
   }, []);
 
@@ -60,7 +60,10 @@ const PriceMarker = ({ item, onPress }: any) => {
     <Marker
       coordinate={{ latitude: item.lat, longitude: item.lng }}
       tracksViewChanges={tracks}
-      onPress={onPress}
+      onPress={(e) => {
+        e.stopPropagation(); // 🔥 prevents map press
+        onPress();
+      }}
     >
       <View style={styles.pin}>
         <Text style={styles.pinText}>{formatPrice(item.price)}</Text>
@@ -93,7 +96,12 @@ const MapScreen: React.FC = () => {
     Geolocation.getCurrentPosition(pos => {
       const { latitude, longitude } = pos.coords;
       mapRef.current?.animateToRegion(
-        { latitude, longitude, latitudeDelta: 0.05, longitudeDelta: 0.05 },
+        {
+          latitude,
+          longitude,
+          latitudeDelta: 0.05,
+          longitudeDelta: 0.05,
+        },
         1000
       );
     });
@@ -110,18 +118,15 @@ const MapScreen: React.FC = () => {
         clusterPressMaxZoom={16}
         spiralEnabled={false}
         mapType={mapType}
-        onPress={() => setSelectedItem(null)}
+        onRegionChangeComplete={(r) => {
-        onRegionChangeComplete={r =>
+          setSelectedItem(null);
-          setMapType(r.latitudeDelta < 0.02 ? 'satellite' : 'standard')
+          setMapType(r.latitudeDelta < 0.02 ? 'satellite' : 'standard');
-        }
+        }}
 
-        /* ---- CLUSTER BUBBLE ---- */
+        /* ---- CLUSTER ---- */
         renderCluster={(cluster, onPress) => {
           const { geometry, properties } = cluster;
 
-          const avgPrice =
-            properties.point_count * 900000 / properties.point_count;
-
           return (
             <Marker
               key={`cluster-${properties.cluster_id}`}
@@ -133,7 +138,7 @@ const MapScreen: React.FC = () => {
             >
               <View style={styles.clusterBubble}>
                 <Text style={styles.clusterText}>
-                  {formatPrice(avgPrice)}
+                  {properties.point_count}
                 </Text>
               </View>
             </Marker>