<template>
  <div v-if="store.currentSong" class="flex items-center gap-3 min-w-0">
    <div
      class="h-10 w-10 flex-shrink-0 rounded-lg bg-surface-200 flex items-center justify-center overflow-hidden"
      :class="{ 'animate-glow-pulse': store.isPlaying }"
    >
      <img
        v-if="store.currentSong.coverImage"
        :src="store.currentSong.coverImage"
        :alt="store.currentSong.title"
        class="h-full w-full object-cover"
      >
      <div v-else class="i-lucide-music h-5 w-5 text-primary" />
    </div>
    <div class="min-w-0">
      <p class="truncate text-sm font-medium text-white">
        {{ store.currentSong.title }}
      </p>
      <p class="truncate text-xs text-white/50">
        {{ store.currentSong.artist }}
      </p>
    </div>
  </div>
  <div v-else class="flex items-center gap-3 text-white/40">
    <div class="h-10 w-10 flex-shrink-0 rounded-lg bg-surface-200 flex items-center justify-center">
      <div class="i-lucide-music h-5 w-5" />
    </div>
    <p class="text-sm">Aucune piste sélectionnée</p>
  </div>
</template>

<script setup lang="ts">
const store = usePlayerStore()
</script>
