'use strict';

import React from 'react';

class SpreadHeading extends React.Component {

    static propTypes = {
        title: React.PropTypes.string.isRequired,
        number: React.PropTypes.string,
        description: React.PropTypes.string
    }

    renderDescription (description) {
        if (description) {
            return <p className="description">{description}</p>
        }
    }

    renderNumber (number) {
        if (number) {
            return <p className="number">{number}</p>
        }
    }

    render () {

        let description = this.renderDescription(this.props.description);
        let number = this.renderNumber(this.props.number);

        return (
            <div className="spread-heading">
                <div className="inner">
                    {number}
                    <h3>{this.props.title}</h3>
                    {description}
                </div>
            </div>
        );
    }

}

export default SpreadHeading;
