@props(['type' => 'success', 'message' => ''])

@php
    $bg = $type === 'success' ? 'bg-emerald-400' : 'bg-rose-600';
    $icon = $type === 'success' ? '✔' : '✖';
@endphp

<div
    x-data="{ show: true }"
    x-show="show"
    x-init="setTimeout(() => show = false, 2500)"
    class="fixed top-11 right-6 z-50 " 
    {{-- style = "width: 300px; height: auto;" --}}
>
    <div class="flex  items-center gap-4 text-white px-5 py-4 rounded-xl shadow-lg {{$bg}}" style = "width: 340px; height: auto;">
        <span class="text-xl leading-none">{{$icon}}</span>
        <span class="text-lg  ">{{ $message }}</span>
        <button type="button" @click="show = false" class="ml-2/ text-white/80 hover:text-white">×</button>
    </div>
    <script>
        document.addEventListener('alpine:init', () => {});
    </script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</div>