@props(['preview', 'dark' => false])

@if($preview && $preview->hasContent())
    <div class="mt-2 rounded-lg overflow-hidden border {{ $dark ? 'border-gray-600 bg-gray-700' : 'border-gray-200 bg-gray-50' }} max-w-md">
        @if($preview->isVideo() && $preview->getEmbedUrl())
            {{-- Video Embed (YouTube, Vimeo) --}}
            <div class="relative pb-[56.25%] h-0">
                <iframe
                    src="{{ $preview->getEmbedUrl() }}"
                    class="absolute top-0 left-0 w-full h-full"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
            </div>
            <div class="p-3">
                <div class="flex items-center gap-2 mb-1">
                    @if($preview->favicon)
                        <img src="{{ $preview->favicon }}" alt="" class="w-4 h-4" onerror="this.style.display='none'">
                    @endif
                    <span class="text-xs {{ $dark ? 'text-gray-400' : 'text-gray-500' }}">{{ $preview->site_name ?? $preview->domain }}</span>
                </div>
                @if($preview->title)
                    <a href="{{ $preview->url }}" target="_blank" rel="noopener noreferrer"
                       class="font-medium text-sm {{ $dark ? 'text-white hover:text-gray-200' : 'text-gray-900 hover:text-gray-700' }} line-clamp-2">
                        {{ $preview->title }}
                    </a>
                @endif
            </div>
        @else
            {{-- Standard Link Preview --}}
            <a href="{{ $preview->url }}" target="_blank" rel="noopener noreferrer" class="block hover:opacity-90 transition-opacity">
                @if($preview->image)
                    <div class="w-full aspect-video bg-gray-200 overflow-hidden">
                        <img src="{{ $preview->image }}"
                             alt="{{ $preview->title ?? 'Link preview' }}"
                             class="w-full h-full object-cover"
                             onerror="this.parentElement.style.display='none'">
                    </div>
                @endif
                <div class="p-3">
                    <div class="flex items-center gap-2 mb-1">
                        @if($preview->favicon)
                            <img src="{{ $preview->favicon }}" alt="" class="w-4 h-4" onerror="this.style.display='none'">
                        @endif
                        <span class="text-xs {{ $dark ? 'text-gray-400' : 'text-gray-500' }}">{{ $preview->site_name ?? $preview->domain }}</span>
                    </div>
                    @if($preview->title)
                        <h4 class="font-medium text-sm {{ $dark ? 'text-white' : 'text-gray-900' }} line-clamp-2 mb-1">
                            {{ Str::limit($preview->title, 100) }}
                        </h4>
                    @endif
                    @if($preview->description)
                        <p class="text-xs {{ $dark ? 'text-gray-300' : 'text-gray-600' }} line-clamp-2">
                            {{ Str::limit($preview->description, 150) }}
                        </p>
                    @endif
                </div>
            </a>
        @endif
    </div>
@endif