<template>
  <slot />
  <Bucket />
  <Platine />
</template>

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

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

<style scoped>
.bucket,
.platine {
  position: fixed;
  bottom: 0;
  right: 0;
}

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

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

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

.platine {
  z-index: 60;
  bottom: -70%;
  transition: bottom 0.3s ease;
  /* width: 25%; */
}
</style>
