@props([
    'title' => 'No data found',
    'message' => 'Get started by creating your first record.',
    'icon' => 'bi-inbox',
    'actionLabel' => null,
    'actionHref' => null,
])

<div {{ $attributes->merge(['class' => 'bv-empty-state']) }}>
    <div class="bv-empty-state__icon" aria-hidden="true">
        <i class="bi {{ $icon }}"></i>
    </div>
    <h3 class="bv-empty-state__title">{{ $title }}</h3>
    <p class="bv-empty-state__message">{{ $message }}</p>

    @if($actionLabel && $actionHref)
        <x-ui.button variant="primary" :href="$actionHref" icon="bi-plus-lg">
            {{ $actionLabel }}
        </x-ui.button>
    @elseif(isset($action))
        {{ $action }}
    @endif

    {{ $slot }}
</div>