import PropTypes from 'prop-types';
import { CapLabel, CapRow, CapSpin } from "@capillarytech/cap-ui-library";
import React from "react";
import { injectIntl } from "react-intl";
import messages from './messages';
import "./index.scss";

export const CapPageSpinner = (props) => {

    return (
        <CapRow className="cap-custom-page-spinner" type='flex' align='middle'>
            {props.spinning &&
                <CapRow className="cap-custom-page-spinner-content">
                    <CapSpin spinning={props.spinning} wrapperClassName='cap-custom-page-spinner-container'>
                        {props.children}
                    </CapSpin>
                    {props.spinning && <CapLabel className="cap-custom-page-spinner-text">{props.intl.formatMessage(messages.text)}</CapLabel>}
                </CapRow>
            }
        </CapRow>
    );
};

CapPageSpinner.propTypes = {
    spinning: PropTypes.bool,
    children: PropTypes.node,
    intl: PropTypes.object.isRequired,
};

CapPageSpinner.defaultProps = {
    spinning: false,
    children: null,
};

 export default injectIntl(CapPageSpinner);
