<script setup>
const { $buildFileUrl, $copyToClipboard } = useNuxtApp();

const props = defineProps({
  className: String,
  image: Object,
  editImage: Function,
  downloadImage: Function,
  openDeleteImageConfirm: Function,
});

const url = $buildFileUrl(props.image.file__file);
</script>
<template>
  <div :class="['buttons has-addons', className]">
    <button
      class="button is-small is-white"
      @click="$copyToClipboard(url)"
      title="Sao chép link"
    >
      <span class="icon">
        <Icon
          name="material-symbols:content-copy-outline-rounded"
          :size="18"
        />
      </span>
    </button>
    <button
      class="button is-small is-white"
      @click="editImage(image)"
      title="Sửa"
    >
      <span class="icon">
        <Icon
          name="material-symbols:edit-outline-rounded"
          :size="18"
        />
      </span>
    </button>
    <button
      class="button is-small is-white"
      @click.prevent="downloadImage(image)"
      title="Tải xuống"
    >
      <span class="icon">
        <Icon
          name="material-symbols:download-rounded"
          :size="18"
        />
      </span>
    </button>
    <button
      class="button is-small is-white"
      @click="openDeleteImageConfirm(image)"
      title="Xóa"
    >
      <span class="icon">
        <Icon
          name="material-symbols:delete-outline-rounded"
          :size="18"
          class="has-text-danger"
        />
      </span>
    </button>
  </div>
</template>
<style></style>
