import './button.css';

type Props = {
  children: React.ReactNode;
  type: 'button' | 'submit';
  disabled?: boolean;
  onClick?: () => void;
  active?: boolean;
  className?: string;
  isProcessing?: boolean;
};

export default function Button(props: Props) {
  const className = ['button'];

  if (props.disabled) {
    className.push('button_disabled');
  }

  if (props.active && !props.disabled) {
    className.push('button_active');
  }

  if (props.className) {
    className.push(props.className);
  }

  return (
    <button
      className={className.join(' ')}
      type={props.type}
      disabled={props.disabled}
      onClick={props.onClick}
    >
      {props.isProcessing && (
        <svg className="button__spinner" viewBox="0 0 50 50">
          <circle className="button__spinner-path" cx="25" cy="25" r="20" fill="none" strokeWidth="5"/>
        </svg>
      )}

      {props.children}
    </button>
  );
}
