/*
  Button组件

*/
import React, {ReactNode} from 'react'
import useClassNames from '../../shared/useClassNames'
import './index.less'
import '../../styles/index.less'

interface ButtonProps {
  type?: 'primary' | 'danger' | 'ghost' | 'black'
  size?: 'large' | 'middle' | 'small'
  disabled?: boolean
  prefixCls?: string
  className?: string
  children: ReactNode
  onClick?(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void
}

const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
  const {type, size, prefixCls, className, children, disabled, ...otherProps} = props
  const newClassName = useClassNames(
    'button',
    prefixCls,
    {
      primary: type === 'primary',
      danger: type === 'danger',
      ghost: type === 'ghost',
      black: type === 'black',
      small: size === 'small',
      middle: size === 'middle',
      disabled: Boolean(disabled),
    },
    className
  )
  return (
    <button
      className={newClassName}
      disabled={disabled}
      onClick={event => props?.onClick?.(event)}
      type="button"
      {...otherProps}>
      {children}
    </button>
  )
}

export default Button