<script setup>
const props = defineProps({
  node: Object,
});
import { getShareLinkForNode, copyShareLinkForNode } from '@/utils.js';
</script>

<template>
  <div>
    <div class="flex bg-gray-200 p-2 font-semibold">
      <div class="my-auto">Share Link</div>
      <div class="ml-auto">
        <button
          @click="copyShareLinkForNode(props.node.node_id)"
          type="button"
          class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
        >
          Copy
        </button>
      </div>
    </div>
    <ul role="list" class="flex-1 divide-y divide-gray-200">
      <li class="p-3">
        <div class="flex space-x-2">
          <input
            type="text"
            readonly
            :value="getShareLinkForNode(props.node.node_id)"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
          />
        </div>
      </li>
    </ul>
  </div>
</template>