<template>
  <div class="flex items-center gap-2">
    <!-- Shuffle -->
    <button
      class="btn-ghost !p-2"
      :class="{ 'text-primary!': store.isShuffled }"
      aria-label="Mélanger"
      @click="toggleShuffle"
    >
      <div class="i-lucide-shuffle h-4 w-4" />
    </button>

    <!-- Previous -->
    <button
      class="btn-ghost !p-2"
      :disabled="!store.hasPrev"
      aria-label="Précédent"
      @click="playPrev"
    >
      <div class="i-lucide-skip-back h-5 w-5" />
    </button>

    <!-- Play/Pause -->
    <button
      class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-surface-bg transition-transform hover:scale-110 active:scale-95"
      :aria-label="store.isPlaying ? 'Pause' : 'Lecture'"
      @click="togglePlayPause"
    >
      <div :class="store.isPlaying ? 'i-lucide-pause' : 'i-lucide-play'" class="h-5 w-5" />
    </button>

    <!-- Next -->
    <button
      class="btn-ghost !p-2"
      :disabled="!store.hasNext"
      aria-label="Suivant"
      @click="playNext"
    >
      <div class="i-lucide-skip-forward h-5 w-5" />
    </button>

    <!-- Repeat -->
    <button
      class="btn-ghost !p-2"
      :class="{ 'text-primary!': store.repeatMode !== 'none' }"
      aria-label="Répéter"
      @click="store.toggleRepeat()"
    >
      <div
        :class="store.repeatMode === 'one' ? 'i-lucide-repeat-1' : 'i-lucide-repeat'"
        class="h-4 w-4"
      />
    </button>
  </div>
</template>

<script setup lang="ts">
const store = usePlayerStore()
const { togglePlayPause, playNext, playPrev } = useAudioPlayer()
const { toggleShuffle } = usePlaylist()
</script>
