import React from 'react';
import { range } from 'lodash';

const CLASS_NAME = 'LoaderWrapper';

type Props = {
    className?: string,
    header?: JSX.Element,
    content: React.ComponentType,
    numberOfItems?: number,
    verticalItems?: boolean,
};

const LoaderWrapper: React.FC<Props> = ({
    className = '',
    header = null,
    content: Content,
    numberOfItems = 1,
    verticalItems = false,
}) => (
    <div className={ `${CLASS_NAME} ${className}` }>
        { header }
        { numberOfItems > 1
            ? (
                <div className={ `${CLASS_NAME}-item${verticalItems ? '-vertical' : ''}` }>
                    { range(numberOfItems).map((key) => (
                        <Content key={ key } />
                    )) }
                </div>
            )
            : <Content /> }
    </div>
);

export default LoaderWrapper;