<template>
  <div v-if="song.lyrics" class="rounded-xl bg-surface p-6">
    <button
      class="flex w-full items-center justify-between text-left"
      @click="isOpen = !isOpen"
    >
      <span class="font-display text-sm font-semibold text-white/70">Paroles</span>
      <div
        :class="isOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
        class="h-4 w-4 text-white/40 transition-transform"
      />
    </button>

    <Transition name="lyrics-expand">
      <div v-if="isOpen" class="mt-4">
        <pre class="whitespace-pre-wrap font-sans text-sm leading-relaxed text-white/60">{{ song.lyrics }}</pre>
      </div>
    </Transition>
  </div>
</template>

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

defineProps<{
  song: Song
}>()

const isOpen = ref(false)
</script>

<style scoped>
.lyrics-expand-enter-active,
.lyrics-expand-leave-active {
  transition: all 0.3s var(--ease-out-expo);
  overflow: hidden;
}

.lyrics-expand-enter-from,
.lyrics-expand-leave-to {
  max-height: 0;
  opacity: 0;
}

.lyrics-expand-enter-to,
.lyrics-expand-leave-from {
  max-height: 500px;
  opacity: 1;
}
</style>
