<template>
  <slot />
  <Bucket />
  <Platine v-if="playerStore.currentTrack" />
</template>

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

const playerStore = usePlayerStore()
const onCardDropped = (card: Track) => {
  console.log('Carte déposée dans le bucket:', card)
}
</script>

<style scoped>
.bucket,
.platine {
  position: fixed;
  bottom: -100%;
  right: 0;
  height: auto;
}

.bucket {
  z-index: 70;
  bottom: -260px;
  width: 100%;
  overflow-x: scroll;
  transition: bottom .3s ease;

  &:hover,
  .card-dragging & {
    bottom: 0;
  }

  .bucket-card-wrapper {
    width: 100%;
  }
}

.platine {
  bottom: -100%;
  transition: bottom 2s ease;

  &.mounted {
    z-index: 80;
    bottom: 0;

    width: 100%;
    max-width: 450px;
  }
}
</style>
