import React from 'react';
import { Pressable,StyleSheet,Text } from 'react-native';
import { Colors,FONTS } from 'global-styles';
import { RFValue } from 'react-native-responsive-fontsize';

const DefaultPressable = ({
  isOutline,
  onPress,
  onLongPress,
  disabled,
  title,
  loading,
}) => (
  <Pressable
    style={styles(isOutline, disabled)}
    android_ripple={{color: Colors.TERTIARY}}
    android_disableSound
    onPress={onPress}
    disabled={disabled}
    onLongPress={onLongPress}
    >
    {loading ? (
      <ActivityIndicator size="small" color={isOutline} />
    ) : (
      <Text style={styles(isOutline, disabled).title}>{title}</Text>
    )}
  </Pressable>
);

DefaultPressable.defaultProps = {
  isOutline: false,
  onLongPress: undefined,
  loading: false,
  disabled: false,
}

const styles = (isOutline, disabled) => 
  StyleSheet.create({
    container: {
      backgroundColor: Colors.PRIMARY,
      alignItems: 'center',
      padding: RFValue(10),
      borderRadius: RFValue(10),
    }
  })

export default DefaultPressable;
