@props([
    'icon' => 'document',
    'title' => 'Belum ada data',
    'description' => null,
])

<div class="fluent-empty-state">

    <div class="fluent-empty-state__icon">
        <x-fluent-icon :name="$icon" size="xl" />
    </div>

    <div class="fluent-empty-state__content">
        <div class="fluent-empty-state__title">
            {{ $title }}
        </div>

        @if($description)
            <div class="fluent-empty-state__desc">
                {{ $description }}
            </div>
        @endif
    </div>

</div>