import React from 'react';

interface IPropsButton
   extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   ref?: React.MutableRefObject<any>;
   onClick?: () => void;
   rounded?: boolean;
   outline?: boolean;
   type?: 'submit' | 'reset' | 'button';
   size?: 'lg' | 'md' | 'sm';
   variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link';
   rest?: any;
}

export const Button: React.FunctionComponent<IPropsButton> = ({
   ref,
   onClick,
   rounded,
   outline,
   type = 'button',
   size = 'medium',
   variant = 'primary',
   children,
   ...rest
}) => {
   let className = '';

   if (size === 'sm') className += ' btn-sm ';
   if (size === 'lg') className += ' btn-lg ';
   if (rounded) className += ' rounded ';

   return (
      <button
         ref={ref}
         type={type}
         className={`btn btn-${outline ? 'outline-' : ''}${variant} btn-small ${className}`}
         onClick={onClick}
         {...rest}
      >
         {children}
      </button>
   );
};
