<template>
  <div
    class="shrink-0 bg-transparent transition-colors hover:bg-accent/40"
    :class="axis === 'x' ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize'"
    role="separator"
    :aria-orientation="axis === 'x' ? 'vertical' : 'horizontal'"
    @pointerdown="onPointerDown"
  />
</template>

<script setup lang="ts">
// Poignée de redimensionnement réutilisable pour les panneaux de l'IDE.
// La taille est un v-model (px) que le parent persiste via le store IDE.
import { useSplitter } from '../../composables/useSplitter';

const size = defineModel<number>({ required: true });
const props = defineProps<{ axis: 'x' | 'y'; min: number; max: number; invert?: boolean }>();

const { onPointerDown } = useSplitter({
  axis: props.axis,
  min: props.min,
  max: props.max,
  invert: props.invert,
  get: () => size.value,
  set: (v) => {
    size.value = v;
  },
});
</script>
