import React, { PropTypes } from 'react'
import { Link } from 'react-router'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  to: PropTypes.string,
  onClick: PropTypes.func,
}

const defaultProps = {
  className: '',
  to: '',
}

function handleClick(e) {
  e.preventDefault()
}

const BarButtonItem = ({ className, children, to, ...other }) =>
  <Link onClick={to === '' ? handleClick : null}
    to={to} className={`${styles.barButtonItem} ${className}`} {...other}
  >
    {children}
  </Link>

BarButtonItem.propTypes = propTypes
BarButtonItem.defaultProps = defaultProps

export default BarButtonItem