@props([
  // type: success | error | info | warning
  'type' => session('success') ? 'success' : (session('error') ? 'error' : (session('info') ? 'info' : null)),
  'message' => session('success') ?? session('error') ?? session('info') ?? null,
  // auto close ms (0 = never)
  'autoClose' => 4000,
])

@php
  $colors = [
    'success' => 'bg-green-50 text-green-800 border-green-200',
    'error'   => 'bg-red-50 text-red-800 border-red-200',
    'info'    => 'bg-blue-50 text-blue-800 border-blue-200',
    'warning' => 'bg-yellow-50 text-yellow-800 border-yellow-200',
  ];
  $icon = [
    'success' => '?',
    'error'   => '?',
    'info'    => '?',
    'warning' => '?',
  ];
@endphp

@if($type && $message)
<div
  x-data="{ show: true }"
  x-init="
    @if((int)$autoClose > 0)
      setTimeout(() => show=false, {{ (int)$autoClose }});
    @endif
  "
  x-show="show"
  x-transition
  class="fixed z-50 top-4 right-4 max-w-sm w-[92vw] sm:w-96"
>
  <div class="border rounded-md shadow {{ $colors[$type] ?? 'bg-gray-50 text-gray-800 border-gray-200' }}">
    <div class="flex items-start gap-3 p-3">
      <div class="text-lg leading-none mt-0.5">{{ $icon[$type] ?? '•' }}</div>
      <div class="flex-1">
        <div class="font-medium capitalize">{{ $type }}</div>
        <div class="text-sm">{{ $message }}</div>
        @if ($errors->any())
          <ul class="mt-2 text-sm list-disc list-inside">
            @foreach ($errors->all() as $err)
              <li>{{ $err }}</li>
            @endforeach
          </ul>
        @endif
      </div>
      <button type="button" @click="show=false" class="px-2 text-xl leading-none">×</button>
    </div>
  </div>
</div>
@endif