import React from 'react';
import { TouchableOpacity, Text, ActivityIndicator } from 'react-native';
import { PrimaryButtonProps } from './PrimaryButton.props';
import { styles } from './primaryButton.styles';
import { colors } from '@theme';

export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
  title,
  isLoading = false,
  disabled = false,
  style,
  ...rest
}) => {
  const isDisabled = disabled || isLoading;

  return (
    <TouchableOpacity
      style={[styles.button, isDisabled ? styles.disabled : null, style]}
      disabled={isDisabled}
      activeOpacity={0.8}
      {...rest}
    >
      {isLoading ? (
        <ActivityIndicator color={colors.white} />
      ) : (
        <Text style={styles.text}>{title}</Text>
      )}
    </TouchableOpacity>
  );
};