import React from 'react';
import {MDBCardImage, MDBCol, MDBRow, MDBSpinner} from "mdb-react-ui-kit";
import Image from "next/image";
const Loader = () => {

    return (
        <div style={{ position: 'static '}}>
            <style jsx>
                {
                    `
                          .label-container{
                              display: flex;
                              justify-content: space-around;  
                              align-items: center;
                              align-content: center;
                              height: 120%;
                              opacity: 100;
                              overflow: hidden;
                              z-index: 15;
                              transition: 2s;
                          }
                          
                          .loaderArea { 
                              background-color: white;
                              padding: 10px;
                              width: 250%;
                              opacity: 100;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              height: 150%;
                              z-index: 16;
                              border-radius: 15px;
                          }
                    `
                }
            </style>
            <div style={{ transition: '0.5s',backgroundColor: 'gray', width: '100%',height: '140%',position: 'absolute',zIndex:100,opacity: 0.8,overflow: 'hidden'}}>
                <div className={'label-container'} >
                    <div className={'loaderArea'}>
                        <img src="/resource/logo/logo-green.png" width={150} alt=""/>
                        <div style={{ margin: 5 }}>
                            <MDBSpinner grow style={{ width: '1rem', height: '1rem',margin: 5 }}>
                                <span className='visually-hidden'>Loading...</span>
                            </MDBSpinner>
                            <MDBSpinner grow style={{ width: '1rem', height: '1rem',margin: 5 }}>
                                <span className='visually-hidden'>Loading...</span>
                            </MDBSpinner>
                            <MDBSpinner grow style={{ width: '1rem', height: '1rem',margin: 5 }}>
                                <span className='visually-hidden'>Loading...</span>
                            </MDBSpinner>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    );
};

export default Loader;