@props(['style' => session('flash.bannerStyle', 'success'), 'message' => session('flash.banner')])

<div>
   
    <div x-data="{{ json_encode(['show' => true, 'style' => $style, 'status' => "", 'message' => $message]) }}"
        :class="{ 'bg-green-700 text-white': style == 'success', 'bg-red-700': style == 'danger', 'bg-gray-500': style != 'success' && style != 'danger' }"
        class="fixed right-0 z-50 min-h-[20%] min-w-[30%] max-w-[30%] p-3"
        style="display: none;"
        x-show="show && message"
        x-on:click.outside="show=false"
        x-init="
            document.addEventListener('notifyUser', event => {
              
                style = event.detail.style;
                status = event.detail.status;
                message = event.detail.message;
                show = true;
                {{-- setTimeout(() => show = false, 3000); --}}
            });
            
        ">

            <div class="">
                <div class="border-b-2 border-green-200"> <h2 x-text="status"></h2></div>
                <p class=" font-medium text-sm text-white  mt-2 break-normal" x-text="message"></p>
            </div> 
        </div>
</div>