<template>
  <figure class="block-video">
    <div class="video-embed" v-html="embedHtml"></div>
    <figcaption v-if="content.caption">{{ content.caption }}</figcaption>
  </figure>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  content: {
    type: Object,
    required: true
  }
});

// Convert video URL to embed iframe
const embedHtml = computed(() => {
  const url = props.content.url;
  if (!url) return '';

  // YouTube
  const youtubeMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/);
  if (youtubeMatch) {
    return `<iframe src="https://www.youtube.com/embed/${youtubeMatch[1]}" frameborder="0" allowfullscreen></iframe>`;
  }

  // Vimeo
  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
  if (vimeoMatch) {
    return `<iframe src="https://player.vimeo.com/video/${vimeoMatch[1]}" frameborder="0" allowfullscreen></iframe>`;
  }

  // Fallback: direct video tag
  return `<video src="${url}" controls></video>`;
});
</script>
