import React from 'react';
import {
  TouchableOpacity,
  Text,
  ActivityIndicator,
  StyleSheet,
  Dimensions,
  Platform,
} from 'react-native';
import {Colors, FONTS} from 'global-styles';
import {RFValue} from 'react-native-responsive-fontsize';
const {width} = Dimensions.get('window');

const Button = props => {
  const {loading, title, outline, onPress, disabled} = props;
  const isOutlineColor = outline ? Colors.PRIMARY : Colors.WHITE;
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      onPress={onPress}
      disabled={disabled}
      style={styles(outline, disabled).container}>
      {loading ? (
        <ActivityIndicator size="small" color={isOutlineColor} />
      ) : (
        <Text style={styles(outline, disabled).title}>{title}</Text>
      )}
    </TouchableOpacity>
  );
};

Button.defaultProps = {
  loading: false,
  title: '',
  outline: false,
  disabled: false,
};

const styles = (isOutline, disabled) =>
  StyleSheet.create({
    container: {
      height: width * 0.12,
      backgroundColor: isOutline ? Colors.WHITE : Colors.PRIMARY,
      borderWidth: 1,
      borderColor: Colors.PRIMARY,
      borderRadius: width * 0.015,
      alignItems: 'center',
      justifyContent: 'center',
      marginHorizontal: width * 0.01,
      opacity: disabled ? 0.5 : 1,
    },
    title: {
      fontFamily: FONTS.poppins[600],
      fontSize: RFValue(12.5),
      color: isOutline ? Colors.PRIMARY : Colors.WHITE,
      marginTop: Platform.OS === 'android' ? width * 0.008 : 0,
    },
  });

export default Button;
