import React from 'react';
import { TouchableOpacity, Text, Dimensions } from 'react-native';
import { SvgProps } from 'react-native-svg';
import { Colors } from 'src/theme';

interface MapButtonProps {
  onPress: () => void;
  icon: React.ComponentType<SvgProps> | null;
  text: string;
  active?: boolean;
  children?: React.ReactNode;
}

const MapButton: React.FC<MapButtonProps> = ({
  onPress,
  icon: Icon,
  text,
  active = false,
  children
}) => {
  const isSmallScreen = Dimensions.get('window').width < 383;
  const iconSize = isSmallScreen ? 12 : 16;

  return (
    <TouchableOpacity
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: active ? Colors.ORANGE : Colors.WHITE,
        borderRadius: 17,
        paddingHorizontal: isSmallScreen ? 7 : 10,
        paddingVertical: 6,
        gap: 4,
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 1
        },
        shadowOpacity: 0.25,
        shadowRadius: 1.5,
        elevation: 2,
        marginVertical: 4
      }}
      onPress={onPress}
    >
      {Icon && (
        <Icon fill={active ? Colors.WHITE : Colors.DARK_BLUE} width={iconSize} height={iconSize} />
      )}
      <Text
        style={{
          color: active ? Colors.WHITE : Colors.DARK_BLUE,
          fontSize: isSmallScreen ? 10 : 12,
          fontWeight: '600'
        }}
        adjustsFontSizeToFit
        minimumFontScale={0.8}
      >
        {text}
      </Text>
      {children}
    </TouchableOpacity>
  );
};

export default MapButton;
