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

import { useBodyPageAttribute } from '../../tools/pageTools';

import './styles/ProductProfilePage.scss';

const n = createNamespace('ProductProfilePage');

export const ProductProfilePage = ({
    banner,
    tabMenu,
    content,
    slider,
    scrollTop,
    footer
}) => {
    // Add body page data-attribute like Plaza theme
    useBodyPageAttribute('profile');

    return (
        <>
            <div id="header-universal">Universal header</div>
            <div {...n('wrapper').props}>
                {banner && <div {...n('banner').props}>{banner}</div>}
                {tabMenu && <div {...n('tabMenu').props}>{tabMenu}</div>}
                {content && <div {...n('content').props}>{content}</div>}
                {slider && <div {...n('slider').props}>{slider}</div>}
            </div>
            {scrollTop}
            {footer && <footer {...n('footer').props}>{footer}</footer>}
        </>
    );
};

ProductProfilePage.propTypes = {
    banner: PropTypes.element,
    tabMenu: PropTypes.element,
    content: PropTypes.element,
    slider: PropTypes.element,
    scrollTop: PropTypes.element,
    footer: PropTypes.element
};

ProductProfilePage.defaultProps = {
    banner: null,
    tabMenu: null,
    content: null,
    slider: null,
    scrollTop: null,
    footer: null
};

export default ProductProfilePage;
