@props([
    'icon'    => 'inbox',
    'title'   => 'No data available yet',
    'message' => null,
    'compact' => false,
])

{{--
| The empty state is the honest alternative to a fake chart.
|
| It is styled to look deliberate rather than broken - this system genuinely
| has one customer today, and a dashboard that renders a flat axis or an
| invisible donut reads as a bug. A calm "nothing here yet, here's why"
| communicates the same fact without looking wrong.
--}}

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center text-center ' . ($compact ? 'py-8' : 'py-14')]) }}>
    <span class="grid place-items-center rounded-2xl bg-slate-100 text-slate-400 dark:bg-slate-700/40 dark:text-slate-500
                 {{ $compact ? 'size-11' : 'size-14' }}">
        <x-icon :name="$icon" class="{{ $compact ? 'size-5' : 'size-7' }}" />
    </span>

    <p class="mt-3 text-sm font-semibold text-slate-700 dark:text-slate-200">{{ $title }}</p>

    @if ($message)
        <p class="mt-1 max-w-xs text-xs leading-relaxed text-slate-500 dark:text-slate-400">{{ $message }}</p>
    @endif

    @if (! $slot->isEmpty())
        <div class="mt-4">{{ $slot }}</div>
    @endif
</div>