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

<div
    x-data="{ show: true }"
    x-show="show"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform translate-y-2"
    x-transition:enter-end="opacity-100 transform translate-y-0"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100 transform translate-y-0"
    x-transition:leave-end="opacity-0 transform translate-y-2"
    @class([
        'fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2',
        'bg-custom-green-50 text-custom-green-800 border border-custom-green-200' => $type === 'success',
        'bg-custom-red-50 text-custom-red-800 border border-custom-red-200' => $type === 'error',
        'bg-custom-blue-50 text-custom-blue-800 border border-custom-blue-200' => $type === 'info',
    ])
    role="alert"
>
    <div class="flex-shrink-0">
        @if ($type === 'success')
            <x-svg-icon icon="icon-check-circle" class="w-5 h-5 text-custom-green-500" />
        @elseif ($type === 'error')
            <x-svg-icon icon="icon-x-circle" class="w-5 h-5 text-custom-red-500" />
        @else
            <x-svg-icon icon="icon-info" class="w-5 h-5 text-custom-blue-500" />
        @endif
    </div>

    <div class="flex-1 text-sm font-medium">
        {{ $message }}
    </div>

    <button
        @click="show = false"
        class="flex-shrink-0 ml-4 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom-primary-500"
        aria-label="{{ __('Dismiss notification') }}"
    >
        <x-svg-icon icon="icon-x" class="w-4 h-4" />
    </button>
</div>