import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import './styles/ListPage.scss';

const n = createNamespace('ListPage');

export const ListPage = ({
    controls,
    listing,
    sidebar
}) => (
    <>
        <div id="header-universal">Universal header</div>
        <div className="container">
            <section {...n('section').props}>
                <div {...n('controls').props}>{controls}</div>
                <div {...n('main').props}>
                    <div {...n('sidebar').props}>{sidebar}</div>
                    <div {...n('listing').props}>{listing}</div>
                </div>
            </section>
        </div>
    </>
);

ListPage.propTypes = {
    controls: PropTypes.element,
    listing: PropTypes.element,
    sidebar: PropTypes.element
};
ListPage.defaultProps = {
    controls: null,
    listing: null,
    sidebar: null
};
export default ListPage;
