import React, { useCallback } from 'react';
import { FiLoader } from 'react-icons/fi';

type Props = {
  className?: string;
  title?: string;
  type?: 'button' | 'submit' | 'reset';
  children?: React.ReactNode;
  disabled?: boolean;
  isLoading?: boolean;
  variant?: 'primary' | 'secondary';
  onClick?: () => void;
};

const Button = ({
  className = '',
  title,
  children,
  disabled,
  variant,
  type,
  isLoading,
  onClick,
}: Props) => {
  const buttonRef = useCallback(
    (node: HTMLButtonElement) => {
      if (variant === 'secondary' && node) {
        node.classList.replace('btn-primary', 'btn-secondary');
      }
    },
    [variant, className]
  );

  return (
    <button
      type={type}
      ref={buttonRef}
      className={`cursor-pointer disabled:cursor-not-allowed  ${className}`}
      disabled={disabled}
      onClick={onClick}
    >
      {isLoading && <FiLoader className="animate-spin text-base" />}
      {isLoading ? null : title || children}
    </button>
  );
};

export default Button;