[Components] Custom Button

import {
  ActivityIndicator,
  StyleSheet,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';
import React from 'react';

import {COLOURS} from '../../constants/colour';
import LinearGradient, {
  LinearGradientProps,
} from 'react-native-linear-gradient';

interface CustomButtonProps extends TouchableOpacityProps {
  loading?: boolean;
  linearGradientColours?: any;
  linearGradientStart?: any;
  linearGradientEnd?: any;
}

const CustomButton: React.FC<CustomButtonProps> = ({
  loading = false,
  activeOpacity = 0.5,
  style,
  disabled,
  children,
  ...props
}) => {
  return (
    <TouchableOpacity
      disabled={disabled}
      {...props}
      style={[
        styles.container,
        {
          backgroundColor: disabled ? COLOURS.DARK_GREY : 'transparent',
        },
        style,
      ]}>
      {props.linearGradientColours ? (
        <LinearGradient
          colors={
            disabled
              ? [COLOURS.DARK_GREY, COLOURS.LIGHT_GREY]
              : props.linearGradientColours
          }
          start={props.linearGradientStart}
          end={props.linearGradientEnd}
          style={[styles.container, styles.linearGradientStyle]}>
          {loading ? <ActivityIndicator color={COLOURS.WHITE} /> : children}
        </LinearGradient>
      ) : loading ? (
        <ActivityIndicator color={COLOURS.WHITE} />
      ) : (
        children
      )}
    </TouchableOpacity>
  );
};

export default CustomButton;

const styles = StyleSheet.create({
  container: {
    height: 50,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
  },
  linearGradientStyle: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
});