@php
    $record = $getRecord();
    $path = $record->ruta_archivo;
    $url = $path ? Illuminate\Support\Facades\Storage::disk('public')->url($path) : null;
    $tipo = $record->tipo;
@endphp

<div class="relative flex items-center justify-center rounded-lg overflow-hidden border border-slate-200 bg-slate-50" style="width: 80px; height: 50px;">
    @if($url)
        @if($tipo === 'video')
            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="w-full h-full block relative group">
                <video src="{{ $url }}" 
                       class="w-full h-full object-cover"
                       muted 
                       playsinline 
                       preload="metadata"
                       onmouseover="this.play()" 
                       onmouseout="this.pause(); this.currentTime = 0;">
                </video>
                <div class="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/10 transition-colors pointer-events-none">
                    <svg class="w-5 h-5 text-white drop-shadow" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M8 5v14l11-7z"/>
                    </svg>
                </div>
            </a>
        @elseif($tipo === 'imagen')
            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="w-full h-full block relative group">
                <img src="{{ $url }}" 
                     alt="Vista previa" 
                     class="w-full h-full object-cover transition-transform group-hover:scale-105" 
                     loading="lazy">
            </a>
        @elseif($tipo === 'audio')
            <div class="flex items-center justify-center w-full h-full text-slate-400">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                </svg>
            </div>
        @else
            <div class="flex items-center justify-center w-full h-full text-slate-400">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
            </div>
        @endif
    @else
        <span class="text-slate-400">-</span>
    @endif
</div>