import React, { Component } from 'react';
import IconButton from './IconButton';


require('./SectionHeader.scss');

class SectionHeader extends Component {

    render() {
        let { title, size, titleIcon, actionButtons, className } = this.props;

        let icon = null;
        if (titleIcon) {
            icon = (<span className="icon">{ this.props.titleIcon }</span>);
        }

        let actionBtns = null;
        if (Array.isArray(actionButtons)) {
            actionBtns = actionButtons.map((def, key) => <IconButton key={ key } {...def} />);
        }

        return (
            <div className={ `section-header ${size || ""} ${className || ""}` }>
                <span className="title">{ icon }{ title }</span>
                <div className="content">
                    { this.props.children }
                    { actionBtns }
                </div>
            </div>
        );
    }

}


export default SectionHeader;