Empty State code

@props([
    'icon' => null,
    'title' => null,
    'description' => null,
    'preset' => null,
])

@php
    /*
    | Empty placeholder for lists/tables with no data. Use the `actions` slot for
    | a call to action, or pick a `preset` for common states — explicit icon /
    | title props always win over the preset defaults.
    |
    | preset: error, maintenance, search, offline
    |
    | Usage:
    |   <x-ui.empty-state icon="folder-open" title="No projects" description="Create your first project.">
    |       <x-slot:actions><x-ui.button icon="plus">New project</x-ui.button></x-slot:actions>
    |   </x-ui.empty-state>
    |
    |   <x-ui.empty-state preset="error" description="Try again in a moment." />
    */
    $presets = [
        'error' => [
            'icon' => 'warning-octagon',
            'title' => 'Something went wrong',
            'tint' => 'bg-red-50 text-red-500 dark:bg-red-950/40 dark:text-red-400',
        ],
        'maintenance' => [
            'icon' => 'wrench',
            'title' => 'Under maintenance',
            'tint' => 'bg-amber-50 text-amber-500 dark:bg-amber-950/40 dark:text-amber-400',
        ],
        'search' => [
            'icon' => 'magnifying-glass',
            'title' => 'No results found',
            'tint' => 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500',
        ],
        'offline' => [
            'icon' => 'wifi-slash',
            'title' => "You're offline",
            'tint' => 'bg-accent-50 text-accent-500 dark:bg-accent-950/40 dark:text-accent-400',
        ],
    ];

    $config = $presets[$preset] ?? null;

    $icon = $icon ?? $config['icon'] ?? 'tray';
    $title = $title ?? $config['title'] ?? 'Nothing here yet';
    $tint = $config['tint'] ?? 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500';
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center text-center px-6 py-12']) }}>
    <span class="flex h-14 w-14 items-center justify-center rounded-2xl {{ $tint }}">
        <x-ui.icon :name="$icon" size="3xl" />
    </span>

    <h3 class="mt-4 text-base font-semibold text-gray-900 dark:text-white">{{ $title }}</h3>

    @if ($description)
        <p class="mt-1 max-w-sm text-sm text-gray-500 dark:text-gray-400">{{ $description }}</p>
    @endif

    @isset($actions)
        <div class="mt-6 flex items-center justify-center gap-3">{{ $actions }}</div>
    @endisset
</div>