<template>
  <article class="relative">
    <main
      class="absolute top-0 backdrop-blur-sm z-40 -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>
    </main>

    <footer
      class="absolute top-0 ml-32 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">
      <!-- Back -->
      <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
        <img src="/favicon.svg" />
      </div>
    </footer>
  </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>