import React from 'react'
import './Button.css'

const firstTruthy = (targets) => {
  for (const target of targets) {
    if (target) return target
  }

  return ''
}

const getClassNames = (props) => {
  const intent = firstTruthy([
    props.primary && 'primary',
    props.safety && 'safety',
    props.danger && 'danger',
    'noIntent'
  ])

  const kind = firstTruthy([
    props.ghost && 'ghost'
  ])

  const size = firstTruthy([
    props.big && 'big',
    props.small && 'small'
  ])

  const disabled = firstTruthy([
    props.disabled && 'disabled'
  ])

  return ['EButton', intent, kind, size, disabled, props.className].join(' ')
}

export const Button = (props) => {
  const {
    primary,
    safety,
    danger,
    big,
    small,
    ghost,
    className,
    ...buttonProps
  } = props

  const classNames = getClassNames(props)

  return <button {...buttonProps} className={classNames} />
}