{{-- "You have nothing here yet": an Expressive shape with an icon on it, a title, a line of
     explanation and the action that fills the space.

         <x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here.">
             <x-slot:actions><x-button label="Upload files" variant="filled" link="/upload" /></x-slot:actions>
         </x-empty-state>

     Not an M3 component; built from M3 Expressive's parts — `shape` (any `<x-shape>` name,
     `cookie-9` by default) in secondary-container behind the `icon` in on-secondary-container,
     a title-large `title`, body-medium `description` or slot. For "your filter matched nothing"
     use a plain line of text instead: a picture there is consolation for a typo.

     An application with its own artwork puts it in the `illustration` slot, which is drawn in place
     of the shape and icon (both props are then unused). The slot sizes itself; its attributes go on
     the element around it, so `class` can set the colour an SVG's `currentColor` takes:

         <x-empty-state title="No routes yet">
             <x-slot:illustration class="text-primary"><svg class="size-32" aria-hidden="true">…</svg></x-slot:illustration>
         </x-empty-state>

     A slot holding only whitespace or comments counts as empty, and the shape and icon stay. --}}

@props([
    'icon' => 'inbox',
    'shape' => 'cookie-9',
    'title' => null,
    'description' => null,
])

<div {{ $attributes->class('flex flex-col items-center gap-4 px-4 py-10 text-center') }}>
    @if (isset($illustration) && $illustration->hasActualContent())
        <div {{ $illustration->attributes }}>{{ $illustration }}</div>
    @else
        <div class="relative grid size-28 place-items-center">
            <x-livewire-material::shape :name="$shape" class="absolute inset-0 size-full text-secondary-container" />
            <x-livewire-material::icon :name="$icon" class="relative size-12 text-on-secondary-container" />
        </div>
    @endif

    @if ($title)
        <h3 class="type-title-lg">{{ $title }}</h3>
    @endif

    @if ($description || $slot->isNotEmpty())
        <div class="max-w-md type-body-md text-on-surface-variant">{{ $description ?? $slot }}</div>
    @endif

    @isset($actions)
        <div class="flex flex-wrap justify-center gap-3 pt-2">{{ $actions }}</div>
    @endisset
</div>