import { Text, TouchableOpacity, View } from 'react-native';
import { styles } from './styles';
import { Colors } from 'src/theme';

export const CustomButton = ({
  onPress,
  title,
  icon,
  isActive,
  disabled,
  flex = 1
}: {
  onPress: () => void;
  title?: string;
  icon?: JSX.Element;
  isActive?: boolean;
  disabled?: boolean;
  flex?: number;
}) => (
  <TouchableOpacity
    style={[
      styles.buttonStyle,
      isActive ? styles.buttonActive : styles.buttonInactive,
      { flex: icon && title ? 0.7 : flex, opacity: disabled ? 0.5 : 1 }
    ]}
    onPress={onPress}
    disabled={disabled}
  >
    {icon && (
      <View style={title ? { marginRight: 5 } : { paddingHorizontal: 16, paddingVertical: 8 }}>
        {icon}
      </View>
    )}
    {title && <Text style={[styles.buttonText, isActive && { color: Colors.WHITE }]}>{title}</Text>}
  </TouchableOpacity>
);
