<template>
  <div class="flex items-center gap-2 flex-wrap">
    <!-- Boutons outils (7 types) -->
    <button
      v-for="tool in TOOL_DEFINITIONS"
      :key="tool.id"
      draggable="true"
      @dragstart="onDragStart(tool, $event)"
      class="px-3 py-1.5 rounded-xl border-2 text-sm cursor-grab active:cursor-grabbing hover:opacity-80 transition-opacity"
      :style="{ borderColor: tool.borderColor, color: tool.color }"
      :title="`Glisser pour ajouter : ${tool.label}`"
    >
      {{ tool.label }}
    </button>

    <div class="h-6 w-px bg-monokai-comment mx-1"></div>

    <!-- Bouton Sauvegarder -->
    <button
      @click="$emit('save')"
      class="px-3 py-1.5 rounded-xl bg-monokai-green text-monokai-bg text-sm font-bold hover:bg-monokai-cyan transition-colors"
      title="Sauvegarder le diagramme"
    >
      <span class="mdi mdi-content-save"></span> Sauvegarder
    </button>
  </div>
</template>

<script setup>
import { TOOL_DEFINITIONS } from '@/stores/architectureStore'

defineEmits(['save'])

function onDragStart(tool, event) {
  event.dataTransfer.setData('application/archnode', tool.id)
  event.dataTransfer.effectAllowed = 'move'
}
</script>
