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

/** 
 * A stateless component to define header text for sections
*/
const DesktopSectionHeader = (props) => {

    return (
        <div>{!props.isTwoColumn ?
            <div className='jp-desktop-section-header-container'>
                <div className='jp-desktop-section-header-heading' aria-label={props.sectionHeader}>{props.sectionHeader}</div>
            </div> :
            <div className='jp-maindiv'>
                <div className='jp-leftside'>
                    <div className='jp-desktop-section-header-container'>
                        <div className='jp-desktop-section-header-heading' aria-label={props.sectionHeader}>{props.sectionHeader}</div>
                    </div>
                </div>
                <div className='jp-rightside'>
                    <div className='jp-desktop-section-header-container'>
                        <div className='jp-desktop-section-header-heading'  aria-label={props.secondSectionHeader}>{props.secondSectionHeader}</div>
                    </div>
                </div>
            </div>}
        </div>
    );
};
export default DesktopSectionHeader;

DesktopSectionHeader.defaultProps = {
    /** Specify the Header of the section */
    sectionHeader: '',
    /** Specify the Header of the 2nd column section */
    secondSectionHeader: '',
    /** To specify its one column or 2 */
    isTwoColumn: true
};

DesktopSectionHeader.propTypes = {
    /** Specify the Header of the section */
    sectionHeader: PropTypes.string,
    /** Specify the Header of the 2nd column section */
    secondSectionHeader: PropTypes.string,
    /** To specify its one column or 2 */
    isTwoColumn: PropTypes.bool,
};