import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import style from './HeaderButton.style'
import { Icon, Image } from '.'
import { sizeInfo } from 'ui/style'

class HeaderButton extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    icon: PropTypes.string,
    image: PropTypes.string,
  }

  render() {
    const size = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
    const { onClick, icon, image } = this.props
    let content = null

    if (image) {
      content = (<Image source={image} width={size} height={size} />)
    } else if (icon) {
      content = (<Icon name={icon} size={size} />)
    }

    return (
      <button type='button' style={[{ height: size, width: size }, style.base]} onClick={onClick}>
        {content}
      </button>
    )
  }
}

export default Radium(HeaderButton)