import ContentLoader from 'react-content-loader';

const SkeletonLoader = (props) => {
    const { width = '100%', height = '160', rows = 4, speed = 1 } = props;

    const rowElements: any = [];
    for (let i = 0; i < rows; i++) {
        rowElements.push(
            <rect key={i} x="0" y={i * 40} rx="12" ry="12" width="100%" height={height} />
        );
    }

    return (
        <ContentLoader
            speed={speed}
            width={width}
            height={height}
            backgroundColor="#F4F4F6"
            foregroundColor="#EAE4F5"
        >
            {rowElements}
        </ContentLoader>
    );
};

export default SkeletonLoader;