import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import IDUtil from '../../../util/IDUtil';

export default class TargetHeader extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div
                className={classNames(IDUtil.cssClassName('target-header'), {
                    active: this.props.active
                })}
                onClick={this.props.onToggle}
            >
                <span className="left">
                    {this.props.icon}
                    <span className="title">{this.props.title}</span>
                </span>
                <span className="count">{this.props.count}</span>
            </div>
        );
    }
}

TargetHeader.propTypes = {
    title: PropTypes.string.isRequired,
    icon: PropTypes.object.isRequired,
    count: PropTypes.number.isRequired,
    active: PropTypes.bool.isRequired,
    onToggle: PropTypes.func.isRequired,
};