text: import React, { PropTypes, Component } from 'react';
  import classnames from 'classnames';
  import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters';
  
  const FILTER_TITLES = {
    [SHOW_ALL]: 'All',
    [SHOW_ACTIVE]: 'Active',
    [SHOW_COMPLETED]: 'Completed',
  };
  
  class Footer extends Component {
    renderTodoCount() {
      const { activeCount } = this.props;
      const itemWord = activeCount === 1 ? 'item' : 'items';
  
      return (
        <span className="todo-count">
          <strong>{activeCount || 'No'}</strong> {itemWord} left
        </span>
      );
    }
  
    renderFilterLink(filter) {
      const title = FILTER_TITLES[filter];
      const { filter: selectedFilter, onShow } = this.props;
  
      return (
        <a
          className={classnames({ selected: filter === selectedFilter })}
          style={{ cursor: 'pointer' }}
          onClick={() => onShow(filter)}
        >
          {title}
        </a>
      );
    }
  
    renderClearButton() {
      const { completedCount, onClearCompleted } = this.props;
      if (completedCount > 0) {
        return (
          <button className="clear-completed" onClick={onClearCompleted}>
            Clear completed
          </button>
        );
      }
  
      return null;
    }
  
    render() {
      return (
        <footer className="footer">
          {this.renderTodoCount()}
          <ul className="filters">
            {[SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED].map(filter =>
              <li key={filter}>
                {this.renderFilterLink(filter)}
              </li>
            )}
          </ul>
          {this.renderClearButton()}
        </footer>
      );
    }
  }
  
  Footer.propTypes = {
    completedCount: PropTypes.number.isRequired,
    activeCount: PropTypes.number.isRequired,
    filter: PropTypes.string.isRequired,
    onClearCompleted: PropTypes.func.isRequired,
    onShow: PropTypes.func.isRequired,
  };
  
  export default Footer;
  