import { Spinner } from 'react-bootstrap';

export default function LoadingOverlay({ loading }) {
    if (!loading) return null;

    
    return (
        <div style={styles.overlay}>
            <Spinner animation='border' role='status' variant='primary' style={{ width: '3rem', height: '3rem' }}>
                <span className='visually-hidden'>Loading...</span>
            </Spinner>
        </div>
    );
}
const styles = {
    overlay: {
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(255, 255, 255, 0.6)',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 9999,
    },
};