<script setup>
const props = defineProps({
  url: {
    type: String,
    default: ''
  }
})

/**
 * YouTube 영상 ID를 추출
 * @param {string} value - 임베드 URL
 * @returns {string} YouTube 영상 ID
 */
const getYouTubeId = (value) => {
  try {
    const parsedUrl = new URL(value)

    if (parsedUrl.hostname.includes('youtu.be')) {
      return parsedUrl.pathname.replace('/', '')
    }

    if (parsedUrl.hostname.includes('youtube.com')) {
      return parsedUrl.searchParams.get('v') || parsedUrl.pathname.split('/').pop() || ''
    }
  } catch {
    return ''
  }

  return ''
}

const youtubeId = computed(() => getYouTubeId(props.url))
const youtubeEmbedUrl = computed(() => youtubeId.value ? `https://www.youtube.com/embed/${youtubeId.value}` : '')
</script>

<template>
  <div class="prose-embed my-8 overflow-hidden border border-line bg-paper">
    <iframe
      v-if="youtubeEmbedUrl"
      class="prose-embed__frame aspect-video w-full"
      :src="youtubeEmbedUrl"
      title="Embedded video"
      loading="lazy"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    />
    <a
      v-else
      class="prose-embed__link block p-5 text-sm font-semibold text-ink hover:opacity-70"
      :href="url"
      target="_blank"
      rel="noreferrer"
    >
      {{ url }}
    </a>
  </div>
</template>
