@props([
    'title',
    'description' => null,
    'variant' => 'neutral',
])

@php
    $variantClass = match ($variant) {
        'primary' => 'ui-status-panel-primary',
        'success' => 'ui-status-panel-success',
        'warning' => 'ui-status-panel-warning',
        'danger' => 'ui-status-panel-danger',
        'info' => 'ui-status-panel-info',
        default => 'ui-status-panel-neutral',
    };
@endphp

<section
    {{ $attributes->class([
        'ui-status-panel',
        $variantClass,
    ]) }}
>
    <div class="ui-status-panel-content">
        <div class="flex min-w-0 items-start gap-4">
            @isset($icon)
                <div class="ui-status-panel-icon" aria-hidden="true">
                    {{ $icon }}
                </div>
            @endisset

            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-3">
                    <h2 class="ui-status-panel-title">
                        {{ $title }}
                    </h2>

                    @isset($badges)
                        {{ $badges }}
                    @endisset
                </div>

                @if ($description)
                    <p class="ui-status-panel-description">
                        {{ $description }}
                    </p>
                @endif

                @isset($details)
                    <div class="ui-status-panel-details">
                        {{ $details }}
                    </div>
                @endisset

                {{ $slot }}
            </div>
        </div>

        @isset($actions)
            <div class="ui-status-panel-actions">
                {{ $actions }}
            </div>
        @endisset
    </div>
</section>