import React, { Component } from 'react'
import createPropsGetter, { createDefaultProps } from 'create-props-getter'

type Props = {
  onClick: (e: React.MouseEvent) => void
  children: React.ReactNode
} & Partial<typeof defaultProps>

const defaultProps = createDefaultProps({
  color: 'green' as 'red' | 'green' | 'blue',
  type: 'button' as 'button' | 'submit',
})

const getProps = createPropsGetter(defaultProps)

class Button extends Component<Props> {
  static readonly defaultProps = defaultProps

  render() {
    const { color, type, onClick: handleClick, children } = getProps(this.props)

    return (
      <button type={type} className={color} onClick={handleClick}>
        {children}
      </button>
    )
  }
}