import Button from "../Buttons"



const Modals = () => {
    return (
        <>
            {/* <!-- component --> */}
            <div class="min-w-screen h-screen animated fadeIn faster  fixed  left-0 top-0 flex justify-center items-center inset-0 z-50 outline-none focus:outline-none bg-no-repeat bg-center bg-cover" id="modal-id">
                <div class="absolute bg-black opacity-80 inset-0 z-0"></div>
                <div class="w-full  max-w-lg  relative mx-auto my-auto rounded-xl shadow-lg  bg-white pt-10">
                    {/* <!--content--> */}
                    <div class="">
                        {/* <!--body--> */}
                        <div class="flex flex-col justify-center items-center text-center ">
                            <img src="/image/modal.png" alt="" class="w-[50%]" />
                            <h2 class="text-2xl mt-5">Are you sure you want to logout?</h2>
                        </div>
                        {/* <!--footer--> */}
                        <div class="p-3 space-x-10 mx-10 mt-3  flex justify-between mb-3">

                            <Button variant=" text-lg shadow-sm font-medium tracking-wider border  bg-[#E84C4C] text-white rounded-full hover:shadow-lg hover:opacity-90 max-w-xs py-2">Yes</Button>
                            <Button variant="  text-lg shadow-sm font-medium tracking-wider border bg-[#7D6FA2] text-white rounded-full hover:shadow-lg hover:opacity-90 max-w-xs py-2">Cancel</Button>

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

        </>
    )
}



export default Modals