import React from 'react';
import PropTypes from 'prop-types';

/** 
 * A stateless component to define primary and secondary header text for sections
*/
const MobileSectionHeader = (props) => {

    return (
        <div className={'jp-mobile-section-header-container '  + props.parentClassName}>
            <span className='jp-mobile-section-header-primary'>{props.sectionPrimaryHeader}</span>
            <span className='jp-mobile-section-header-secondary'>{props.sectionSecondaryHeader}</span>
        </div>
    );
};
export default MobileSectionHeader;

MobileSectionHeader.defaultProps = {
    /** Specify the Primary Header of the section */
    sectionPrimaryHeader:'',
    /** Specify the secondary Header of the section */
    sectionSecondaryHeader:''

};

MobileSectionHeader.propTypes = {
    /** Specify the Primary Header of the section */
    sectionPrimaryHeader:PropTypes.string,
    /** Specify the secondary Header of the section */
    sectionSecondaryHeader:PropTypes.string,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string
};