{{--
    Alert / Flash Message Component
    ─────────────────────────────────
    Usage (manual):
        <x-ui.alert type="success">Data berhasil disimpan.</x-ui.alert>
        <x-ui.alert type="danger" :dismissible="false">Terjadi kesalahan.</x-ui.alert>

    Usage (auto flash messages — letakkan sekali di layout atau awal section):
        <x-ui.alert :flash="true" />

    Props:
        type        string   'success' | 'danger' | 'warning' | 'info'
        dismissible bool     default true — tampilkan tombol × untuk dismiss
        flash       bool     default false — baca dari session('success/error/warning/info')
--}}
@props([
    'type'        => 'success',
    'dismissible' => true,
    'flash'       => false,
])

@if($flash)
    @foreach(['success','error','warning','info'] as $key)
        @if(session($key))
        @php
            $flashType = $key === 'error' ? 'danger' : $key;
            $flashIcons = [
                'success' => 'bi-check-circle-fill',
                'danger'  => 'bi-x-circle-fill',
                'warning' => 'bi-exclamation-triangle-fill',
                'info'    => 'bi-info-circle-fill',
            ];
        @endphp
        <div class="alert alert-{{ $flashType }} {{ $dismissible ? 'alert-dismissible fade show' : '' }} d-flex align-items-center gap-2 mb-3" role="alert">
            <i class="bi {{ $flashIcons[$flashType] ?? 'bi-info-circle-fill' }} flex-shrink-0"></i>
            <span>{{ session($key) }}</span>
            @if($dismissible)
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Tutup"></button>
            @endif
        </div>
        @endif
    @endforeach
@else
    @php
        $icons = [
            'success' => 'bi-check-circle-fill',
            'danger'  => 'bi-x-circle-fill',
            'warning' => 'bi-exclamation-triangle-fill',
            'info'    => 'bi-info-circle-fill',
        ];
    @endphp
    <div class="alert alert-{{ $type }} {{ $dismissible ? 'alert-dismissible fade show' : '' }} d-flex align-items-center gap-2 mb-3" role="alert">
        <i class="bi {{ $icons[$type] ?? 'bi-info-circle-fill' }} flex-shrink-0"></i>
        <span>{{ $slot }}</span>
        @if($dismissible)
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Tutup"></button>
        @endif
    </div>
@endif