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

@php
    $classes = match($type) {
        'success' => 'bg-green-50 border-green-400 text-green-800',
        'error' => 'bg-red-50 border-red-400 text-red-800',
        'warning' => 'bg-yellow-50 border-yellow-400 text-yellow-800',
        default => 'bg-blue-50 border-blue-400 text-blue-800',
    };
@endphp

<div class="mb-4 p-3 border-l-4 rounded {{ $classes }}" x-data="{ show: true }" x-show="show">
    <div class="flex justify-between items-center">
        <p class="text-sm">{{ $message }}</p>
        <button @click="show = false" class="ml-4 text-lg leading-none opacity-50 hover:opacity-100">&times;</button>
    </div>
</div>