<template>
  <NuxtLink :to="'/playlists/' + playlist"
    class="compilation mx-auto p-4 inline-flex hover:text-black">
    <atropos-component class="my-atropos" active-offset="80" shadow-scale="1.05">
      <img :src="'ES00A/bkg.jpg'" data-atropos-offset="-8" class="invert" />
      <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
      <p data-atropos-offset="0" class="playlist-title inset-0 object-cover relative text-center -top-16 text-4xl text-black text-shadow">
        {{playlist}}
      </p>
    </atropos-component>
  </NuxtLink>
</template>

<script setup>
const props = defineProps(['playlist'])
</script>

<style scoped>
.logo {
  filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
  left: 14%;
  top: 10%;
}

.playlist-title {
  text-shadow: 0 0 5px #558ABB;
}
</style>
