<template>
  <article
    class="backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
    <!-- Cover -->
    <figure class="flex-1 overflow-hidden rounded-t-xl">
      <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
    </figure>

    <!-- Body -->
    <div class="p-3 text-center bg-white rounded-b-xl">
      <h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
      <p class="text-sm text-neutral-500 truncate">
        {{ props.track.artist.name }}
      </p>
    </div>
  </article>

</template>

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

const props = defineProps<{ track: Track }>()
const coverUrl = `https://f4.bcbits.com/img/${props.track.artist.coverId}_4.jpg`
</script>