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

@php
$url = $data['url'] ?? '';
$title = $data['title'] ?? 'Contenu intégré';
$aspect = $data['aspect'] ?? '16/9';
$maxWidth = $data['max_width'] ?? null;

// Map aspect ratio to Tailwind class
$aspectClass = match($aspect) {
'4/3' => 'aspect-[4/3]',
'1/1' => 'aspect-square',
'21/9' => 'aspect-[21/9]',
default => 'aspect-video',
};
@endphp

@if($url)
<div class="my-8" @if($maxWidth) style="max-width: {{ (int) $maxWidth }}px" @endif>
    <div class="{{ $aspectClass }} relative w-full rounded-lg overflow-hidden bg-card">
        <iframe
            src="{{ $url }}"
            title="{{ e($title) }}"
            class="absolute inset-0 w-full h-full border-0"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
            sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
            allowfullscreen></iframe>
    </div>
</div>
@endif