import React from 'react';
import { View, StyleSheet } from 'react-native';
import COLORS from '../../utils/colors';

interface StartMarkerProps {
  /**
   * Custom element (text or icon) to display at the start of the circle
   */
  children: React.ReactNode;
  
  /**
   * Size of the marker container
   */
  size?: number;
  
  /**
   * Background color of the marker container
   */
  backgroundColor?: string | null;
  
  /**
   * Position coordinates for the marker
   */
  position: {
    x: number;
    y: number;
  };
  
  /**
   * Additional style for the marker container
   */
  containerStyle?: any;
}

const StartMarker: React.FC<StartMarkerProps> = ({
  children,
  size = 20,
  backgroundColor = null,
  position,
  containerStyle = {},
}) => {
  return (
    <View
      style={[
        styles.container,
        {
          width: size,
          height: size,
          borderRadius: size / 2,
          backgroundColor: backgroundColor || COLORS.TRANSPARENT,
          left: position.x - size / 2,
          top: position.y - size / 2,
        },
        containerStyle,
      ]}
    >
      {children}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10,
  },
});

export default StartMarker;