<template>
  <div v-if="song.lyrics" class="rounded-xl bg-surface p-6">
    <span class="font-display text-sm font-semibold text-white/70">Paroles</span>
    <div class="mt-4 max-h-96 overflow-y-auto">
      <pre class="whitespace-pre-wrap font-sans text-sm leading-relaxed text-white/60">{{ song.lyrics }}</pre>
    </div>
  </div>
</template>

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

defineProps<{
  song: Song
}>()
</script>
