const LoadingComponent = ({ loading, message }) => {
    const { Spinner }  = ReactBootstrap
    if (!loading) return null; // Không hiển thị gì nếu không loading

    const overlayStyle = {
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(255, 255, 255, 0.5)', // Độ mờ 0.5
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 9999, // Đảm bảo overlay hiển thị trên mọi thứ khác
    };

    const messageStyle = {
        marginTop: '10px', // Khoảng cách giữa spinner và message
        textAlign: 'center',
    };

    return (
        <div style={overlayStyle}>
            <Spinner animation="border" role="status" variant="primary" />
            {message && <div style={messageStyle}>{message}</div>}
        </div>
    );
};