import React from 'react';

import clsx from 'clsx';

export type KintonePluginButtonProps = React.PropsWithChildren<{
  className?: string;
  variant: 'normal' | 'disabled' | 'dialog-ok' | 'dialog-cancel' | 'add-row-image' | 'remove-row-image';
  type?: 'button' | 'submit' | 'reset';
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
}>;

const KintonePluginButton: React.FC<KintonePluginButtonProps> = (props) => {
  const { className, variant, type = 'button', onClick, children } = props;
  return (
    <button
      className={clsx(`kintoneplugin-button-${variant}`, className)}
      type={type}
      onClick={onClick}
      disabled={variant === 'disabled'}
    >
      {children}
    </button>
  );
};
export default KintonePluginButton;