<template>
  <article class="flip-card w-56 h-80">
    <div class="flip-inner">
      <main
        class="flip-front backdrop-blur-sm border-2 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
        <!-- Cover -->
        <figure @click="playerStore.playTrack(props.track)" class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
          <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">
          <div class="label">
            {{ props.track.order }}
          </div>
          <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="flip-back 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 class="label label--id">
            {{ props.track.order }}
          </div>
        </div>
      </footer>
    </div>
  </article>

</template>

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

const props = defineProps<{ track: Track }>()
const playerStore = usePlayerStore()
const coverUrl = props.track.coverId.startsWith('http')
  ? props.track.coverId
  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`;
</script>

<style>
.label {
  @apply rounded-full size-7 p-2 bg-esyellow leading-3 -mt-6;
  font-weight: bold;
  text-align: center;
}

/* Flip effect */
.flip-card {
  perspective: 1000px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  will-change: transform;
}

.flip-front {
  transform: rotateY(0deg);
}

.flip-back {
  transform: rotateY(180deg);
}
</style>