<template>
  <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:gap-4">
    <UiBaseButton @click="$emit('open-player')">
      <div class="i-lucide-play mr-2 h-5 w-5" />
      Présentation musicale
    </UiBaseButton>
    <UiBaseButton variant="accent" @click="$emit('open-pdf')">
      <div class="i-lucide-book-open mr-2 h-5 w-5" />
      Lire le livre
    </UiBaseButton>
    <UiBaseButton v-if="showChapters" variant="ghost" to="/economique/modele-eco">
      <div class="i-lucide-list mr-2 h-5 w-5" />
      Présentation des chapitres
    </UiBaseButton>
    <UiBaseButton variant="ghost" to="/economique/commande">
      <div class="i-lucide-shopping-bag mr-2 h-5 w-5" />
      Commandez le livre
    </UiBaseButton>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  showChapters?: boolean
}>(), {
  showChapters: true,
})

defineEmits<{
  'open-player': []
  'open-pdf': []
}>()
</script>
