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

const n = createNamespace('GridContainer');
const GridContainer = ({
    children,
    className,
    style
}) => {
    const renderChild = child => {
        // keep child's classes appended
        const { props } = n('content').withClass(child.props.className).withTestId().withE2EId();
        return React.cloneElement(child, props);
    };

    return (
        <div {...n('container').withClass(className).withTestId().withE2EId()
            .withVariables(style).props}
        >
            {React.Children.map(children, renderChild)}
        </div>
    );
};

GridContainer.propTypes = {
    // eslint-disable-next-line react/forbid-prop-types
    style: PropTypes.object,
    className: PropTypes.string
};

GridContainer.defaultProps = {
    style: null,
    className: null
};

export default GridContainer;
