<script setup lang="ts">
const emit = defineEmits(['copy'])

const clicked = ref<boolean>(false)

function p() {
  emit('copy')

  if (!clicked.value) setTimeout(() => (clicked.value = false), 2000)
  clicked.value = true
}
</script>

<template>
  <div
    class="absolute flex flex-col justify-start top-0 left-0 w-full h-full pointer-events-none opacity-0 hover:opacity-100 transition-ease"
  >
    <div class="flex flex-row justify-end items-center p-2">
      <span
        class="overlay-action flex-grow-0 pointer-events-auto cursor-pointer p-2 border rounded-xl"
        @click="p"
      >
        <Transition name="switch" mode="out-in">
          <iconify-icon v-if="!clicked" icon="mdi:content-copy" inline />
          <iconify-icon
            v-else
            icon="mdi:check-bold"
            class="text-green-500"
            inline
          />
        </Transition>
      </span>
    </div>
  </div>
</template>
