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

/**
 * 표시용 오디오 제목을 반환한다.
 * @returns {string} 오디오 제목
 */
const displayTitle = computed(() => props.title || 'Audio')

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

<template>
  <section class="prose-audio my-8 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)] p-4 shadow-[0_14px_36px_rgba(15,23,42,0.06)] sm:p-5">
    <div class="prose-audio__inner flex flex-col gap-4 sm:flex-row sm:items-center">
      <div class="prose-audio__icon flex h-20 w-20 shrink-0 items-center justify-center rounded-[6px] bg-[var(--site-accent)] text-white sm:h-[86px] sm:w-[86px]">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-9 w-9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M9 18V5l10-2v13" />
          <circle cx="6" cy="18" r="3" />
          <circle cx="16" cy="16" r="3" />
        </svg>
      </div>
      <div class="prose-audio__body min-w-0 flex-1">
        <p class="prose-audio__title mb-2 text-base font-semibold leading-snug text-[var(--site-text)] sm:text-lg">
          {{ displayTitle }}
        </p>
        <p v-if="description" class="prose-audio__description mb-3 text-sm leading-relaxed text-[var(--site-muted)]">
          {{ description }}
        </p>
        <audio
          v-if="hasAudioSource"
          class="prose-audio__player w-full accent-[var(--site-accent)]"
          :src="src"
          controls
          preload="metadata"
        />
        <p v-else class="prose-audio__empty text-sm font-semibold text-[var(--site-muted)]">
          오디오 URL이 없습니다.
        </p>
      </div>
    </div>
  </section>
</template>
