@props(['data' => []])

@php
$url = $data['url'] ?? '';
$provider = null;
$embedUrl = null;

// YouTube detection
if (preg_match('/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $matches)) {
$provider = 'youtube';
$embedUrl = 'https://www.youtube-nocookie.com/embed/' . $matches[1];
}
// Vimeo detection
elseif (preg_match('/vimeo\.com\/(\d+)/', $url, $matches)) {
$provider = 'vimeo';
$embedUrl = 'https://player.vimeo.com/video/' . $matches[1];
}
@endphp

<div class="my-8">
    @if($provider && $embedUrl)
    {{-- Responsive 16:9 iframe for YouTube/Vimeo --}}
    <div class="relative w-full aspect-video rounded-lg overflow-hidden bg-card">
        <iframe
            src="{{ $embedUrl }}"
            class="absolute inset-0 w-full h-full"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            sandbox="allow-scripts allow-same-origin"
            allowfullscreen
            title="{{ $data['title'] ?? 'Video' }}"></iframe>
    </div>
    @elseif($url)
    {{-- Native HTML5 video --}}
    <video
        src="{{ $url }}"
        poster="{{ $data['poster'] ?? '' }}"
        controls
        preload="metadata"
        class="rounded-lg w-full">
        {{ __('blog.video_not_supported') }}
    </video>
    @endif

    @if(!empty($data['caption']))
    <p class="text-sm text-muted-foreground mt-2 text-center">{{ $data['caption'] }}</p>
    @endif
</div>