import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTheme } from '@theme';
import { getStyles } from './profileInfoRow.styles';
import { ProfileInfoRowProps } from './profileInfoRow.props';

export const ProfileInfoRow: React.FC<ProfileInfoRowProps> = ({
  icon,
  label,
  value,
  valueColor,
  isBadge = false,
  badgeBgColor,
  onPress,
  isLast = false,
  containerStyle,
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const Content = (
    <View
      style={[
        styles.container,
        isLast && styles.noBorder,
        containerStyle,
      ]}>
      <View style={styles.leftContent}>
        <View style={styles.iconWrapper}>
          <Icon name={icon} size={18} color={colors.icon} />
        </View>
        <Text style={styles.label}>{label}</Text>
      </View>

      {isBadge ? (
        <View
          style={[
            styles.badgeContainer,
            { backgroundColor: badgeBgColor || `${colors.icon}20` },
          ]}>
          <Text
            style={[
              styles.badgeText,
              { color: valueColor || colors.icon },
            ]}>
            {value}
          </Text>
        </View>
      ) : (
        <Text
          style={[
            styles.value,
            valueColor ? { color: valueColor } : undefined,
          ]}
          numberOfLines={1}
          ellipsizeMode="tail">
          {value}
        </Text>
      )}
    </View>
  );

  if (onPress) {
    return (
      <TouchableOpacity activeOpacity={0.7} onPress={onPress}>
        {Content}
      </TouchableOpacity>
    );
  }

  return Content;
};