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

<div
    x-data="{ show: true }"
    x-show="show"
    x-init="setTimeout(() => show = false, 5000)"
    class="fixed top-24 left-1/2 w-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 py-4 rounded-lg shadow-md text-white z-50 border-2 border-white
        @switch($type)
            @case('success') bg_green @break
            @case('error') bg_red @break
            @case('warning') bg_orange text-black @break
            @default bg_gray2
         @endswitch
    ">

    <div class="flex items-center relative">
        @if($errors->any())
            <ul class="list-disc pl-5">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        @else
            <span class="flex-1">{{ $message }}</span>
        @endif
        <button @click="show = false" class="ml-4 font-bold absolute top-0 right-0">×</button>
    </div>
</div>