import React, {ReactNode} from 'react';
import usePaystackPayment from './use-paystack';
import {PaystackProps, PaystackCallbacks} from './types';

interface PaystackButtonProps extends PaystackProps, PaystackCallbacks {
  text?: string;
  className?: string;
  disabled?: boolean;
  children?: ReactNode;
}

const PaystackButton = ({
  text,
  className,
  children,
  onSuccess,
  onCancel,
  onClose,
  onError,
  onLoad,
  disabled,
  ...config
}: PaystackButtonProps): JSX.Element => {
  const initializePayment = usePaystackPayment(config);

  return (
    <button
      className={className}
      onClick={(): void => initializePayment({config, onSuccess, onCancel, onClose, onError, onLoad})}
      disabled={disabled}
    >
      {text || children}
    </button>
  );
};

export default PaystackButton;
