<template>
  <header class="mb-8">
    <div class="mb-2 flex items-center gap-2">
      <span class="font-mono text-sm text-primary/70">
        Chapitre {{ order }}
      </span>
      <span v-if="readingTime" class="text-xs text-white/30">
        · {{ readingTime }}
      </span>
    </div>
    <h1 class="chapter-title font-display font-bold leading-tight tracking-tight text-white">
      {{ title }}
    </h1>
    <p v-if="description" class="mt-3 text-lg text-white/60">
      {{ description }}
    </p>

    <!-- Associated songs badges -->
    <div v-if="songs.length > 0" class="mt-4 flex flex-wrap gap-2">
      <button
        v-for="song in songs"
        :key="song.id"
        class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/20"
        @click="playSong(song)"
      >
        <div class="i-lucide-music h-3 w-3" />
        {{ song.title }}
      </button>
    </div>
  </header>
</template>

<script setup lang="ts">
import type { Song } from '~/types/song'

const props = defineProps<{
  title: string
  description?: string
  order: number
  readingTime?: string
  chapterSlug: string
}>()

const bookData = useBookData()
const { loadAndPlay } = useAudioPlayer()

await bookData.init()

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

function playSong(song: Song) {
  loadAndPlay(song)
}
</script>

<style scoped>
.chapter-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid hsl(12 76% 48% / 0.4);
}
</style>
