@props([
    'success' => null,
    'error' => null,
    'warning' => null,
    'info' => null,
])

@if($success)
<div class="flash-message flash-message-success" data-auto-dismiss>
    <div class="flash-message-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#D1FAE5"/><path d="M6 10l3 3 5-6" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
    <p class="flash-message-text">{{ $success }}</p>
    <button class="flash-message-close" onclick="this.closest('.flash-message').remove()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>
@endif

@if($error)
<div class="flash-message flash-message-error" data-auto-dismiss>
    <div class="flash-message-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#FEE2E2"/><path d="M7 7l6 6M13 7l-6 6" stroke="#DC2626" stroke-width="2" stroke-linecap="round"/></svg>
    </div>
    <p class="flash-message-text">{{ $error }}</p>
    <button class="flash-message-close" onclick="this.closest('.flash-message').remove()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>
@endif

@if($warning)
<div class="flash-message flash-message-warning" data-auto-dismiss>
    <div class="flash-message-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#FEF3C7"/><path d="M10 6v5M10 13h.01" stroke="#D97706" stroke-width="2" stroke-linecap="round"/></svg>
    </div>
    <p class="flash-message-text">{{ $warning }}</p>
    <button class="flash-message-close" onclick="this.closest('.flash-message').remove()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>
@endif

@if($info)
<div class="flash-message flash-message-info" data-auto-dismiss>
    <div class="flash-message-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#DBEAFE"/><path d="M10 9v4M10 6h.01" stroke="#2563EB" stroke-width="2" stroke-linecap="round"/></svg>
    </div>
    <p class="flash-message-text">{{ $info }}</p>
    <button class="flash-message-close" onclick="this.closest('.flash-message').remove()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>
@endif

@if(session('success') && !$success)
<div class="flash-message flash-message-success" data-auto-dismiss>
    <div class="flash-message-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#D1FAE5"/><path d="M6 10l3 3 5-6" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
    <p class="flash-message-text">{{ session('success') }}</p>
    <button class="flash-message-close" onclick="this.closest('.flash-message').remove()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>
@endif

@if(session('error') && !$error)
<div class="flash-message flash-message-error" data-auto-dismiss>
    <div class="flash-message-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#FEE2E2"/><path d="M7 7l6 6M13 7l-6 6" stroke="#DC2626" stroke-width="2" stroke-linecap="round"/></svg>
    </div>
    <p class="flash-message-text">{{ session('error') }}</p>
    <button class="flash-message-close" onclick="this.closest('.flash-message').remove()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>
@endif

@if(session('warning') && !$warning)
<div class="flash-message flash-message-warning" data-auto-dismiss>
    <div class="flash-message-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#FEF3C7"/><path d="M10 6v5M10 13h.01" stroke="#D97706" stroke-width="2" stroke-linecap="round"/></svg>
    </div>
    <p class="flash-message-text">{{ session('warning') }}</p>
    <button class="flash-message-close" onclick="this.closest('.flash-message').remove()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>
@endif

@if(session('info') && !$info)
<div class="flash-message flash-message-info" data-auto-dismiss>
    <div class="flash-message-icon">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#DBEAFE"/><path d="M10 9v4M10 6h.01" stroke="#2563EB" stroke-width="2" stroke-linecap="round"/></svg>
    </div>
    <p class="flash-message-text">{{ session('info') }}</p>
    <button class="flash-message-close" onclick="this.closest('.flash-message').remove()">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
    </button>
</div>
@endif

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.flash-message[data-auto-dismiss]').forEach(function(el) {
        setTimeout(function() {
            el.style.opacity = '0';
            el.style.transform = 'translateY(-10px)';
            setTimeout(function() { el.remove(); }, 300);
        }, 5000);
    });
});
</script>
@endpush