import React, { ButtonHTMLAttributes } from 'react';

export type ButtonType =
  | 'default'
  | 'primary'
  | 'danger'
  | 'warning'
  | 'success';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  buttonType?: ButtonType;
  buttonSize?: 'default' | 'lg' | 'md' | 'sm';
}

const Button: React.FC<ButtonProps> = ({
  buttonType = 'default',
  buttonSize = 'default',
  children,
  className,
  ...props
}) => {
  const buttonStyle = [
    'inline-flex items-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150',
  ];
  switch (buttonType) {
    case 'primary':
      buttonStyle.push(
        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700'
      );
      break;
    case 'danger':
      buttonStyle.push(
        'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 focus:shadow-outline-red active:bg-red-700'
      );
      break;
    case 'warning':
      buttonStyle.push(
        'text-white bg-orange-500 hover:bg-orange-400 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700'
      );
      break;
    case 'success':
      buttonStyle.push(
        'text-white bg-green-400 hover:bg-green-300 focus:border-green-700 focus:shadow-outline-green active:bg-green-700'
      );
      break;
    default:
      buttonStyle.push(
        'leading-5 font-medium rounded-md text-gray-200 bg-cool-gray-500 hover:bg-cool-gray-400 hover:text-white focus:border-blue-300 focus:shadow-outline-blue active:text-gray-200 active:bg-cool-gray-400'
      );
  }

  switch (buttonSize) {
    case 'sm':
      buttonStyle.push('px-2.5 py-1.5 text-xs');
      break;
    case 'md':
      buttonStyle.push('px-4 py-2 text-sm');
      break;
    case 'lg':
      buttonStyle.push('px-6 py-3 text-base');
      break;
    default:
      buttonStyle.push('px-4 py-2 text-sm');
  }
  if (className) {
    buttonStyle.push(className);
  }
  return (
    <button className={buttonStyle.join(' ')} {...props}>
      {children}
    </button>
  );
};

export default Button;