import React, { memo } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Marker } from 'react-native-maps';

const ClusteredMarker = ({
  geometry,
  properties,
  onPress,
  clusterColor,
  clusterTextColor,
}) => (
  <Marker
    coordinate={{
      longitude: geometry.coordinates[0],
      latitude: geometry.coordinates[1],
    }}
    onPress={onPress}
    style={styles.marker}
  >
    <View style={styles.container}>
      <View style={[styles.wrapper, { backgroundColor: clusterColor }]} />
      <View style={[styles.cluster, { backgroundColor: clusterColor }]}>
        <Text style={[styles.text, { color: clusterTextColor }]}>
          {properties.point_count}
        </Text>
      </View>
    </View>
  </Marker>
);

const styles = StyleSheet.create({
  marker: {
    zIndex: 9,
  },
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: 64,
    height: 64,
  },
  wrapper: {
    position: 'absolute',
    borderRadius: 32,
    width: 64,
    height: 64,
    opacity: 0.5,
    zIndex: 0,
  },
  cluster: {
    display: 'flex',
    borderRadius: 25,
    width: 50,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1,
  },
  text: {
    fontSize: 18,
    lineHeight: 48,
    fontWeight: 'bold',
  },
});

export default memo(ClusteredMarker);
