/* eslint-disable react/button-has-type */
import React from 'react';
import { ButtonProps } from '../../model/interactive';
import Loader from './Loader';

const RoundedButton: React.FC<ButtonProps> = ({
  title,
  altTitle,
  onClick,
  type,
  size,
  className,
  isLoading,
  isDisabled,
  id,
  leftIcon,
  rightIcon,
}) => {
  return (
    <button
      onClick={onClick}
      id={id}
      data-testid={id}
      type={type || 'button'}
      title={altTitle || title}
      className={`roundedClick ${isLoading ? 'isLoading' : ''} ${
        size || 'medium'
      } ${isDisabled ? ' isDisabled' : ''}${className || ''} ${
        leftIcon ? 'leftIcon' : ''
      } ${rightIcon ? 'rightIcon' : ''}`}
      disabled={isDisabled || isLoading}
    >
      {leftIcon}
      {isLoading ? <Loader /> : <p>{title}</p>}
      {rightIcon}
    </button>
  );
};

export default RoundedButton;