import React, { useMemo } from 'react';
import { View, Text, StyleSheet } from 'react-native';

interface CustomPinProps {
  number?: number | string;
  size?: number;
  color?: string;
  isSpecial?: boolean;
}

const CustomPin: React.FC<CustomPinProps> = React.memo(({ 
  number, 
  size = 32, 
  color = '#F59E0B',
  isSpecial = false 
}) => {
  const pinStyles = useMemo(() => {
    const borderRadius = size / 2;
    const borderWidth = Math.max(2, size * (isSpecial ? 0.08 : 0.06));
    
    return {
      pin: { width: size, height: size },
      pinBody: { 
        backgroundColor: color,
        borderRadius: borderRadius,
        borderWidth: borderWidth
      },
      text: { fontSize: size * (isSpecial ? 0.5 : 0.4) }
    };
  }, [size, color, isSpecial]);
  
  if (isSpecial) {
    return (
      <View style={[styles.pin, pinStyles.pin]}>
        <View style={[styles.specialPinBody, pinStyles.pinBody]}>
          <Text style={[styles.specialPinText, pinStyles.text]}>
            {number || '🏢'}
          </Text>
        </View>
      </View>
    );
  }
  
  return (
    <View style={[styles.pin, pinStyles.pin]}>
      <View style={[styles.pinBody, pinStyles.pinBody]}>
        <Text style={[styles.pinNumber, pinStyles.text]}>
          {number}
        </Text>
      </View>
    </View>
  );
});

CustomPin.displayName = 'CustomPin';

const styles = StyleSheet.create({
  pin: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  pinBody: {
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  pinNumber: {
    color: '#FFFFFF',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  specialPinBody: {
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 6,
  },
  specialPinText: {
    color: '#FFFFFF',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default CustomPin; 