/**
 * LoadingSpinner Component
 *
 * @package Advanced_Customer_Account
 */

import { Spinner } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

/**
 * Loading spinner component.
 *
 * @param {Object}  props           Component props.
 * @param {string}  props.size      Spinner size (small, medium, large).
 * @param {string}  props.message   Optional loading message.
 * @param {boolean} props.fullPage  Show as full page loader.
 * @param {string}  props.className Additional CSS classes.
 * @return {JSX.Element} LoadingSpinner component.
 */
const LoadingSpinner = ( {
    size = 'medium',
    message = '',
    fullPage = false,
    className = '',
} ) => {
    const classes = classnames(
        'aca-loading',
        `aca-loading--${ size }`,
        {
            'aca-loading--full-page': fullPage,
        },
        className
    );

    return (
        <div className={ classes } role="status" aria-live="polite">
            <Spinner />
            { message && (
                <span className="aca-loading__message">{ message }</span>
            ) }
            <span className="screen-reader-text">
                { message || __( 'Loading...', 'advanced-customer-account' ) }
            </span>
        </div>
    );
};

export default LoadingSpinner;