import { LuSignature } from "react-icons/lu";
import { useSelector } from 'react-redux';
import { RootState } from '../../store/store';


const Loader = () => {

    const loaderData = useSelector((state: RootState) => state.loader);

    return (
        <div className='absolute w-full h-full top-0 left-0 transition-all duration-75'>
            {/* Background */}
            {/* <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-gradient-to-br from-white/20 to-white/10 backdrop-blur-xs"></div> */}
            <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-[var(--hideModalBg)] opacity-60"></div>

            {/* Loader */}
            <div className="absolute z-50 w-screen h-screen flex items-center justify-center">
                <div className='bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg'>
                    <LuSignature className="text-4xl font-bold animate-text" />
                    <p>
                        {loaderData.message != undefined ? `${loaderData.message}` : 'Loading ...'}
                    </p>
                </div>
            </div>
        </div>
    )
}

export default Loader