{{--
    Info Notice / Alert Banner Component - AdminLTE style
    Collapsible notice banners for important information
    
    Usage:
    <x-proxmox::ui.notice-banner 
        title="Cloud-init Configuration Notice"
        variant="info"
        :collapsible="true"
        storage-key="overview-notice-collapsed"
    >
        <p>Your notice content here...</p>
    </x-proxmox::ui.notice-banner>
--}}

@props([
    'title' => null,
    'variant' => 'info', // info, warning, danger, success
    'collapsible' => false,
    'storageKey' => null,
    'icon' => null,
    'showCondition' => null, // Alpine.js expression for conditional display
])

@php
    $variants = [
        'info' => [
            'bg' => 'bg-cyan-400/10',
            'border' => 'border-cyan-400',
            'icon' => $icon ?? 'ri-information-line',
            'iconColor' => 'text-cyan-400',
        ],
        'warning' => [
            'bg' => 'bg-amber-500/10',
            'border' => 'border-amber-500',
            'icon' => $icon ?? 'ri-alert-line',
            'iconColor' => 'text-amber-500',
        ],
        'danger' => [
            'bg' => 'bg-red-500/10',
            'border' => 'border-red-500',
            'icon' => $icon ?? 'ri-error-warning-line',
            'iconColor' => 'text-red-500',
        ],
        'success' => [
            'bg' => 'bg-green-600/10',
            'border' => 'border-green-600',
            'icon' => $icon ?? 'ri-checkbox-circle-line',
            'iconColor' => 'text-green-600',
        ],
    ];
    
    $config = $variants[$variant] ?? $variants['info'];
@endphp

<div 
    @if($collapsible)
        x-data="{
            isCollapsed: {{ $storageKey ? "localStorage.getItem('$storageKey') === 'true'" : 'false' }},
            toggle() {
                this.isCollapsed = !this.isCollapsed;
                @if($storageKey)
                    localStorage.setItem('{{ $storageKey }}', this.isCollapsed);
                @endif
            }
        }"
    @endif
    @if($showCondition)
        x-show="{{ $showCondition }}"
        x-transition
    @endif
    {{ $attributes }}
    class="{{ $config['bg'] }} border {{ $config['border'] }} border-l-4 rounded-md p-4"
>
    <div class="flex items-start gap-3.5">
        <x-dynamic-component :component="$config['icon']" class="mt-0.5 size-5 flex-shrink-0 {{ $config['iconColor'] }}" />
        <div class="min-w-0 flex-1">
            @if($title)
                <div class="mb-2 flex items-center justify-between">
                    <h3 class="text-sm font-medium">{{ $title }}</h3>
                    @if($collapsible)
                        <button @click="toggle()" type="button" class="text-base/50 hover:text-base/70 transition-colors">
                            <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 rotate-180 transition-transform' : 'size-5 transition-transform'" />
                        </button>
                    @endif
                </div>
            @endif
            
            <div @if($collapsible) x-show="!isCollapsed" x-transition @endif class="text-sm text-base/70 leading-relaxed">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>