import React from 'react';

import PropTypes from 'prop-types';

/**
 * Higher-order component that either shows a one element or the other, depending on whether the "smallScreen" prop
 * passed to it is true or false.
 */
export default (LargeScreenComponent, SmallScreenComponent) => {
    // eslint-disable-next-line require-jsdoc
    function ResponsiveSwitch(props) {
        return (
            <Choose>
                <When condition={props.smallScreen}>
                    <SmallScreenComponent {...props} />
                </When>
                <Otherwise>
                    <LargeScreenComponent {...props} />
                </Otherwise>
            </Choose>
        );
    }

    ResponsiveSwitch.propTypes = {
        smallScreen: PropTypes.bool
    };

    return ResponsiveSwitch;
};