<script setup lang="ts">
interface Preview {
  x: number;
  y: number;
  width: number;
  height: number;
}

defineProps<{ preview: Preview }>();
</script>

<template>
  <div
    class="snap-preview"
    :style="{
      left: `${preview.x}px`,
      top: `${preview.y}px`,
      width: `${preview.width}px`,
      height: `${preview.height}px`,
    }"
  ></div>
</template>

<style scoped>
.snap-preview {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  z-index: 9998; /* Below the dragged window, above others */
  transition: all 0.1s ease-out;
  backdrop-filter: blur(5px);
}
</style>
