@props(['url' => '', 'size' => 'h-10 w-10'])

@php
    $url = (string) $url;
    $path = parse_url($url, PHP_URL_PATH) ?? '';
    $ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));
    $isVideo = in_array($ext, ['mp4', 'webm', 'mov', 'm4v', 'ogv'], true);
@endphp

<div {{ $attributes->merge(['class' => "relative {$size} shrink-0 flex items-center justify-center overflow-hidden rounded-lg border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800"]) }}>
    @if($url === '')
        <x-heroicon-o-photo class="h-5 w-5 text-zinc-300 dark:text-zinc-600" />
    @elseif($isVideo)
        <video class="h-full w-full object-cover" preload="metadata" muted playsinline>
            <source src="{{ $url }}#t=1">
        </video>
        <span class="pointer-events-none absolute inset-0 flex items-center justify-center">
            <x-heroicon-s-play class="h-4 w-4 text-white/90 drop-shadow" />
        </span>
    @else
        <img src="{{ $url }}" alt="" class="h-full w-full object-cover" loading="lazy"
            onerror="this.style.display='none';this.nextElementSibling.classList.remove('hidden');" />
        <span class="hidden">
            <x-heroicon-o-link class="h-5 w-5 text-zinc-400" />
        </span>
    @endif
</div>