<template>
  <div v-if="songs.length > 0" class="flex flex-wrap gap-1">
    <span
      v-for="song in songs"
      :key="song.id"
      class="inline-flex items-center gap-1 rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary/80"
    >
      <div class="i-lucide-music h-2.5 w-2.5" />
      {{ song.title }}
    </span>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  chapterSlug: string
}>()

const bookData = useBookData()
bookData.init()

const songs = computed(() => bookData.getChapterSongs(props.chapterSlug))
</script>
