// @flow
import React from 'react'

import Spinner from './components/Spinner'
import Wrapper from './Wrapper'

type Props = {
  backgroundColor?: string,
  children?: React$Element<*> | string,
  className?: string,
  disabled?: boolean,
  isLoading?: boolean,
  onClick?: Function,
  role?: string,
  size?: string
}

export const DefaultButton = ({
  backgroundColor = 'dodger-blue',
  children,
  className,
  disabled = false,
  isLoading = false,
  onClick,
  role = 'button',
  size = 'normal'
}: Props) => {
  return (
    <Wrapper
      backgroundColor={backgroundColor}
      className={className}
      onClick={onClick}
      role={role}
      size={size}
      disabled={disabled}
    >
      {isLoading
        ? [children, <Spinner backgroundColor={backgroundColor} key="spin" />]
        : children}
    </Wrapper>
  )
}

export default DefaultButton
