Untitled

import React from 'react';
import PropTypes from 'prop-types';
import { FaSpinner } from 'react-icons/fa';

const BUTTON_TYPE = {
  danger: {
    classNames: 'bg-red-500 hover:bg-red-600',
  },
  primary: {
    classNames: 'bg-gray-800 hover:bg-gray-900',
  },
  default: {
    classNames: 'bg-gray-800 hover:bg-gray-900',
  },
};

const Button = ({
  disabled = false,
  onClick,
  label,
  children,
  type = 'default',
  isLoading = false,
  overrideClassNames = '',
  className,
}) => {
  const defaultClassNames =
    'disabled:opacity-25 disabled:cursor-not-allowed focus:outline-none rounded py-3 px-5 text-white';

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
      ${className}
      ${BUTTON_TYPE[type].classNames}
      ${overrideClassNames || defaultClassNames}`}
    >
      {isLoading && <FaSpinner className="animate-spin mx-auto text-white" />}
      {!isLoading && (label || children)}
    </button>
  );
};

Button.propTypes = {};

export default Button;