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

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

import './styles/ProductConfiguratorPage.scss';

const n = createNamespace('ProductConfiguratorPage');

export const ProductConfiguratorPage = ({
    productConfigurator,
    footer
}) => {
    // Add body page data-attribute like Plaza theme
    useBodyPageAttribute('product-configurator');

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

ProductConfiguratorPage.propTypes = {
    productConfigurator: PropTypes.element,
    footer: PropTypes.element
};

ProductConfiguratorPage.defaultProps = {
    productConfigurator: null,
    footer: null
};

export default ProductConfiguratorPage;
