content: 'use strict';
  
  import React from 'react';
  import ReactCSS from 'reactcss';
  
  class Tab extends ReactCSS.Component {
  
    constructor() {
      super();
  
      this.handleClick = this.handleClick.bind(this);
    }
  
    classes() {
      return {
        'default': {
          tab: {
            color: this.props.inactive || this.props.color,
            cursor: 'pointer',
            paddingLeft: '12px',
            paddingRight: '12px',
            height: '48px',
            lineHeight: '48px',
            textAlign: 'center',
            fontSize: '14px',
            textTransform: this.props.capitalize === false ? '' : 'uppercase',
            fontWeight: '500',
            whiteSpace: 'nowrap',
            opacity: '.47',
            transition: 'opacity 100ms linear',
          },
        },
        'selected': {
          tab: {
            color: this.props.color,
            opacity: '.87',
          },
        },
      };
    }
  
    handleClick() {
      if (this.props.selectable !== false) {
        this.props.onClick(this.props.tab);
      }
    }
  
    render() {
      return (
        <div is="tab" onClick={ this.handleClick }>{ this.props.children }</div>
      );
    }
  
  }
  
  Tab.propTypes = {
    selected: React.PropTypes.bool,
  };
  
  Tab.defaultProps = {
    selected: false,
    color: '#fff',
  };
  
  export default Tab;
  