import React from 'react';
import './navbar-button.less';

/**\

    title: NavbarButton
    category: component
    description:
        Navbar pill button used inside dashboards Navbar. Standard 'a' element
        props can be passed through NavbarButton.
    props:
        title[String]: link title
        click[Function|String]: Either a function that will fire onClick or a
            string representing the href.

\**/

class NavbarButton extends React.Component {
    render() {
        const props = Object.assign({}, this.props);
        let href = '#',
            click = null;

        if (typeof this.props.click === 'function') {
            click = this.props.click;
        } else if (typeof this.props.click === 'string') {
            href = this.props.click;
        }

        delete props.click;

        return (
            <div className="navbar-button">
                <a href={ href }
                    onClick={ click }
                    { ...props }>
                    <span>
                        { this.props.title }
                    </span>
                </a>
            </div>
        );
    }
}

export default NavbarButton;
