{{--
    Info Notice / Alert Banner Component - TailAdmin 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-blue-light-50 dark:bg-blue-light-500/10',
            'border' => 'border-blue-light-200 dark:border-blue-light-800',
            'icon' => $icon ?? 'ri-information-line',
            'iconColor' => 'text-blue-light-500',
        ],
        'warning' => [
            'bg' => 'bg-warning-50 dark:bg-warning-500/10',
            'border' => 'border-warning-200 dark:border-warning-800',
            'icon' => $icon ?? 'ri-alert-line',
            'iconColor' => 'text-warning-500',
        ],
        'danger' => [
            'bg' => 'bg-error-50 dark:bg-error-500/10',
            'border' => 'border-error-200 dark:border-error-800',
            'icon' => $icon ?? 'ri-error-warning-line',
            'iconColor' => 'text-error-500',
        ],
        'success' => [
            'bg' => 'bg-success-50 dark:bg-success-500/10',
            'border' => 'border-success-200 dark:border-success-800',
            'icon' => $icon ?? 'ri-checkbox-circle-line',
            'iconColor' => 'text-success-500',
        ],
    ];
    
    $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'],
        'rounded-xl 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-theme-sm font-medium text-gray-800 dark:text-white/90">{{ $title }}</h3>
                    @if($collapsible)
                        <button @click="toggle()" type="button" class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
                            <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-theme-sm text-gray-600 dark:text-gray-400">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>