@props([
    'variant' => 'default',
    'icon' => null,
    'title' => null,
    'text' => null,
    'actionUrl' => null,
    'actionLabel' => null,
    'actionIcon' => null,
    'actionVariant' => 'primary',
    'size' => 'md',
])

@php
    $variant = in_array($variant, ['default', 'search', 'error'], true) ? $variant : 'default';
    $size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'md';
    $actionVariant = in_array($actionVariant, ['primary', 'secondary', 'danger'], true) ? $actionVariant : 'primary';
    $icon = $icon ?: match ($variant) {
        'search' => 'search',
        'error' => 'alert',
        default => 'portfolio',
    };
    $buttonClass = match ($actionVariant) {
        'secondary' => 'btn-secondary',
        'danger' => 'btn-danger',
        default => 'btn-primary inline',
    };
@endphp

<div {{ $attributes->class(['ui-empty-state', 'ui-empty-state--'.$variant, 'ui-empty-state--'.$size]) }}>
    <span class="ui-empty-state-icon" aria-hidden="true">
        <x-ui.icon :name="$icon" size="28" />
    </span>

    @if ($title)
        <strong class="ui-empty-state-title">{{ $title }}</strong>
    @endif

    @if ($text)
        <p class="ui-empty-state-text">{{ $text }}</p>
    @endif

    @if ($actionUrl && $actionLabel)
        <a href="{{ $actionUrl }}" class="{{ $buttonClass }}">
            @if ($actionIcon)
                <x-ui.icon :name="$actionIcon" size="14" />
            @endif
            {{ $actionLabel }}
        </a>
    @elseif ($actionLabel)
        <button type="button" class="{{ $buttonClass }}">
            @if ($actionIcon)
                <x-ui.icon :name="$actionIcon" size="14" />
            @endif
            {{ $actionLabel }}
        </button>
    @endif

    {{ $slot }}
</div>