import React from 'react';
import ContentLoader from "react-content-loader";

export default function Spinner(props) {
    return (
        <ContentLoader
            height={160}
            speed={2}
            primaryColor="#f3f3f3"
            secondaryColor="#ecebeb"
            className="msg-cont"
            style={centeredStyle}
            {...props}
        >
            <rect x="40" y="6" rx="4" ry="4" width="117" height="6.4" />
            <rect x="40" y="20" rx="3" ry="3" width="85" height="6.4" />
            <rect x="0" y="60" rx="3" ry="3" width="350" height="6.4" />
            <rect x="0" y="78" rx="3" ry="3" width="380" height="6.4" />
            <rect x="0" y="96" rx="3" ry="3" width="201" height="6.4" />
            <rect x="0" y="0" rx="0" ry="0" width="32" height="32" />
        </ContentLoader>
    )
}

const centeredStyle = {
    background: '#fff',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
}