Video Empty code

@props([
    'status' => 'empty',
    'title' => null,
    'description' => null,
    'progress' => null,
])

@php
    /*
    | Empty / processing placeholder for video surfaces. Use under a player,
    | inside a grid, or as a full panel while a render finishes.
    |
    | status: empty, processing, error, offline
    |
    | Usage:
    |   <x-ui.video-empty status="processing" :progress="64" />
    |   <x-ui.video-empty status="empty" title="No videos yet" />
    */
    $presets = [
        'empty' => [
            'icon' => 'film-strip',
            'title' => 'No videos yet',
            'description' => 'Upload a clip or pick one from your library.',
            'tint' => 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500',
        ],
        'processing' => [
            'icon' => 'spinner-gap',
            'title' => 'Processing video',
            'description' => 'Transcoding in progress. Playback will unlock when this finishes.',
            'tint' => 'bg-brand-50 text-brand-500 dark:bg-brand-950/40 dark:text-brand-400',
        ],
        'error' => [
            'icon' => 'warning-octagon',
            'title' => 'Video unavailable',
            'description' => 'This file failed to process. Try uploading again.',
            'tint' => 'bg-red-50 text-red-500 dark:bg-red-950/40 dark:text-red-400',
        ],
        'offline' => [
            'icon' => 'wifi-slash',
            'title' => 'You are offline',
            'description' => 'Reconnect to stream or download this video.',
            'tint' => 'bg-accent-50 text-accent-500 dark:bg-accent-950/40 dark:text-accent-400',
        ],
    ];

    $status = array_key_exists($status, $presets) ? $status : 'empty';
    $config = $presets[$status];
    $title ??= $config['title'];
    $description ??= $config['description'];
    $showProgress = $status === 'processing' && is_numeric($progress);
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center rounded-2xl border border-dashed border-gray-200 bg-white px-6 py-12 text-center shadow-sm dark:border-gray-800 dark:bg-gray-900']) }}>
    <span @class(['flex h-14 w-14 items-center justify-center rounded-2xl', $config['tint']])>
        <x-ui.icon
            :name="$config['icon']"
            size="3xl"
            @class(['animate-spin' => $status === 'processing'])
        />
    </span>

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

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

    @if ($showProgress)
        <div class="mt-5 w-full max-w-xs">
            <x-ui.progress :value="(float) $progress" label="Transcoding" show-value size="sm" />
        </div>
    @endif

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