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

const n = createNamespace('FullWidth');
const containerProps = n('container').withClass('container').props;

export const FullWidth = ({
    tabs,
    slider,
    carousel,
    topFeatures
}) => (
    <div {...n('wrap').props}>
        <div id="header-universal">Universal header</div>
        <div {...containerProps}>
            <div className="row">
                <div className="col-md-12">
                    {carousel}
                </div>
            </div>
        </div>
        <div className="container">
            <div className="row">
                <div className="col-md-12">
                    <div className="test-content">
                        <p>This is some content hardcoded in the toolkit</p>
                    </div>
                </div>
            </div>
        </div>
        <div className="container">
            <div className="row">
                <div className="col-md-12">
                    {tabs}
                </div>
            </div>
        </div>
        <div className="container">
            <div className="row">
                <div className="col-md-12">
                    {slider}
                </div>
            </div>
        </div>

        <div className="container">
            <div className="row">
                <div className="col-md-12">
                    {topFeatures}
                </div>
            </div>
        </div>
        <div className="container">
            <div className="row">
                <div className="col-md-12">
                    <div className="test-content">
                        <p>This is some content hardcoded in the toolkit</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
);

FullWidth.propTypes = {
    tabs: PropTypes.element,
    topFeatures: PropTypes.element,
    carousel: PropTypes.element,
    slider: PropTypes.element
};
FullWidth.defaultProps = {
    tabs: null,
    topFeatures: null,
    carousel: null,
    slider: null
};
export default FullWidth;
