<script setup lang="ts">
import { useDraggable } from '@vue-dnd-kit/core';
import { computed } from 'vue';

const { index, source } = defineProps<{
    index: number;
    source: any[];
}>();

const { elementRef, handleDragStart, isOvered, isDragging } = useDraggable({
    data: computed(() => ({
        index,
        source,
    })),
});
</script>

<template>
    <div ref="elementRef" @pointerdown="handleDragStart" :class="{
        'is-over': isOvered,
        'is-dragging': isDragging,
    }" class="draggable">
        <slot />
    </div>
</template>

<style>
.draggable {
    cursor: move;
    user-select: none;
    touch-action: none;
}

.is-dragging {
    opacity: 0.2;
}

.is-over {
    padding-top: 0.5rem;
    border-top: 2px solid var(--border);
}
</style>
