@props(['caption' => '', 'media' => null, 'name' => 'User'])

<div class="bg-white rounded-xl border border-gray-200 overflow-hidden text-[13px]">
    {{-- Thumbnail --}}
    @if($media)
        <div class="relative">
            <img src="{{ $media }}" class="w-full aspect-video object-cover" alt="">
            <span class="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1 rounded">0:30</span>
        </div>
    @else
        <div class="w-full aspect-video bg-gray-900 flex items-center justify-center">
            <svg class="w-12 h-12 text-red-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
            </svg>
        </div>
    @endif

    {{-- Meta --}}
    <div class="p-3 flex gap-2">
        <img src="https://ui-avatars.com/api/?name={{ urlencode($name) }}&background=ff0000&color=fff&size=40" class="w-9 h-9 rounded-full shrink-0" alt="">
        <div>
            <p class="font-semibold text-gray-900 line-clamp-2 leading-tight">{{ Str::limit($caption, 80) }}</p>
            <p class="text-gray-400 text-xs mt-0.5">{{ $name }} · 0 views · Just now</p>
        </div>
    </div>
</div>