@props([
    'type' => 'info',
    'message' => '',
    'dismissible' => true,
    'icon' => null,
    'list' => null
])

@php
    $config = [
        'success' => [
            'bg' => 'bg-success-50 dark:bg-success-900/20',
            'border' => 'border-success-500',
            'text' => 'text-success-800 dark:text-success-200',
            'icon' => $icon ?? 'fa-check-circle',
            'title' => 'Berhasil!'
        ],
        'error' => [
            'bg' => 'bg-danger-50 dark:bg-danger-900/20',
            'border' => 'border-danger-500',
            'text' => 'text-danger-800 dark:text-danger-200',
            'icon' => $icon ?? 'fa-exclamation-circle',
            'title' => 'Error!'
        ],
        'warning' => [
            'bg' => 'bg-warning-50 dark:bg-warning-900/20',
            'border' => 'border-warning-500',
            'text' => 'text-warning-800 dark:text-warning-200',
            'icon' => $icon ?? 'fa-exclamation-triangle',
            'title' => 'Peringatan!'
        ],
        'info' => [
            'bg' => 'bg-info-50 dark:bg-info-900/20',
            'border' => 'border-info-500',
            'text' => 'text-info-800 dark:text-info-200',
            'icon' => $icon ?? 'fa-info-circle',
            'title' => 'Informasi'
        ]
    ];

    $current = $config[$type] ?? $config['info'];
@endphp

<div class="alert alert-{{ $type }} mb-4 animate-slide-in" 
     role="alert"
     x-data="{ show: true }"
     x-show="show"
     x-transition:leave="transition ease-in duration-300"
     x-transition:leave-start="opacity-100 transform scale-100"
     x-transition:leave-end="opacity-0 transform scale-90">
    
    <div class="flex items-start">
        <!-- Icon -->
        <div class="flex-shrink-0">
            <i class="fas {{ $current['icon'] }} text-{{ $type === 'error' ? 'danger' : $type }}-600 dark:text-{{ $type === 'error' ? 'danger' : $type }}-400 text-lg"></i>
        </div>
        
        <!-- Content -->
        <div class="ml-3 flex-1">
            <h3 class="text-sm font-medium {{ $current['text'] }}">
                {{ $current['title'] }}
            </h3>
            
            @if($message)
                <div class="mt-1 text-sm {{ $current['text'] }}">
                    <p>{{ $message }}</p>
                </div>
            @endif
            
            @if($list && count($list) > 0)
                <ul class="mt-2 text-sm {{ $current['text'] }} list-disc list-inside">
                    @foreach($list as $item)
                        <li>{{ $item }}</li>
                    @endforeach
                </ul>
            @endif
        </div>
        
        <!-- Dismiss Button -->
        @if($dismissible)
            <div class="ml-auto pl-3">
                <button type="button" 
                        @click="show = false"
                        class="inline-flex rounded-md p-1.5 {{ $current['text'] }} hover:bg-{{ $type === 'error' ? 'danger' : $type }}-100 dark:hover:bg-{{ $type === 'error' ? 'danger' : $type }}-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-{{ $type === 'error' ? 'danger' : $type }}-500">
                    <span class="sr-only">Tutup</span>
                    <i class="fas fa-times"></i>
                </button>
            </div>
        @endif
    </div>
</div>

@push('styles')
<style>
.alert {
    transition: all 0.3s ease;
}
</style>
@endpush