<script setup>
    import treeview from "vue3-treeview";
    import "vue3-treeview/dist/style.css";

    import { toRef, watch, reactive, watchEffect } from 'vue'

    const props = defineProps({
        block: {
            type: Object,
            required: true,
        }
    })

    const emit = defineEmits(['update:block']);

    // Work directly with a reactive reference to the parent block
    const local = toRef(props, 'block');

    // Optionally: auto-emit updated block on change (if needed elsewhere)
    watch(local, (val) => {
        emit('update:block', val);
    }, { deep: true });
</script>

<template>
    <div class="space-y-4">
      <div class="mb-2">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Anker navn (DOM ID)</label>
          <input
              type="text"
              class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
              v-model="local.anchorName"
          />
      </div>
      <div class="mb-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tittel</label>
        <input
          type="text"
          class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
          v-model="local.title"
          @input="update"
        />
      </div>
    </div>
  </template>

<style scoped>

</style>