<template>
  <div v-if="overlayControls" class="z-10 flex items-center gap-1">
    <Tooltip>
      <TooltipTrigger>
        <Button
          variant="outline"
          class="p-1.5 rounded border border-gray-200 bg-[var(--color-white)]/80 hover:bg-muted text-muted-foreground"
          @click="$emit('save-image')"
          aria-label="Save image"
          title="Save image"
        >
          <i class="dku-icon-image-16"></i>
        </Button>
      </TooltipTrigger>
      <TooltipContent :hide-arrow="true"><span>Save image</span></TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger>
        <Button
          variant="outline"
          class="p-1.5 rounded border border-gray-200 bg-[var(--color-white)]/80 hover:bg-muted text-muted-foreground"
          @click="$emit('restore')"
          aria-label="Restore"
          title="Restore"
        >
          <i class="dku-icon-arrow-circular-16"></i>
        </Button>
      </TooltipTrigger>
      <TooltipContent :hide-arrow="true"><span>Restore</span></TooltipContent>
    </Tooltip>
  </div>
</template>
<script lang="ts" setup>
import { TooltipContent, TooltipTrigger, Tooltip } from '@/components/ui/tooltip'
import { computed } from 'vue'
import Button from '../ui/button/Button.vue'

const props = defineProps<{ overlayControls?: boolean }>()

const overlayControls = computed(() => props.overlayControls !== false)
defineEmits<{
  (e: 'save-image'): void
  (e: 'restore'): void
}>()
</script>
