<script setup>
const { dealer } = useStore();
const { $buildFileUrl, $copyToClipboard, $getEditRights } = 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 is-gap-1', className]">
    <button
      class="button is-small is-white"
      @click="$copyToClipboard(url)"
      title="Sao chép link"
    >
      <span class="icon">
        <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
      </span>
    </button>
    <button
      v-if="!dealer && $getEditRights()"
      class="button is-small is-white"
      @click="editImage(image)"
      title="Sửa"
    >
      <span class="icon">
        <SvgIcon v-bind="{ name: 'edit.svg', type: 'primary', size: 18 }" />
      </span>
    </button>
    <button
      class="button is-small is-white"
      @click.prevent="downloadImage(image)"
      title="Tải xuống"
    >
      <span class="icon">
        <SvgIcon v-bind="{ name: 'download.svg', type: 'success', size: 18 }" />
      </span>
    </button>
    <button
      v-if="!dealer && $getEditRights()"
      class="button is-small is-white"
      @click="openDeleteImageConfirm(image)"
      title="Xóa"
    >
      <span class="icon">
        <SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
      </span>
    </button>
  </div>
</template>
<style>

</style>