<script setup>
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  poster: {
    type: String,
    default: ''
  },
  caption: {
    type: String,
    default: ''
  }
})

/**
 * 재생 가능한 비디오 URL인지 확인한다.
 * @returns {boolean} 비디오 URL 여부
 */
const hasVideoSource = computed(() => Boolean(props.src && (props.src.startsWith('/') || /^https?:\/\//i.test(props.src))))
</script>

<template>
  <figure class="prose-video my-8">
    <div class="prose-video__shell overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] shadow-[0_16px_40px_rgba(15,23,42,0.08)]">
      <video
        v-if="hasVideoSource"
        class="prose-video__media aspect-video w-full bg-black object-cover"
        :src="src"
        :poster="poster || undefined"
        :title="title || 'Video'"
        controls
        preload="metadata"
      />
      <div
        v-else
        class="prose-video__empty flex aspect-video w-full items-center justify-center bg-[color-mix(in_srgb,var(--site-line)_45%,var(--site-panel))] text-sm font-semibold text-[var(--site-muted)]"
      >
        비디오 URL이 없습니다.
      </div>
    </div>
    <figcaption
      v-if="caption || title"
      class="prose-video__caption mt-3 text-center text-sm leading-relaxed text-[var(--site-muted)]"
    >
      {{ caption || title }}
    </figcaption>
  </figure>
</template>
