<script setup>
import { ref } from 'vue'

defineProps({
    text: {
        type: String,
        default: ''
    }
})

const emit = defineEmits({
    'remove': null
})

const show = ref(false)
function showPopupRemove() {
    show.value = !show.value
}

function remove() {
    show.value = false
    emit('remove')
}
</script>
<template>
  <div class="relative inline-flex">
    <div v-if="show" class=" absolute text-xs px-1 py-1 w-[130px] leading-none rounded bg-pink top-[-35px]">
      <span class="cursor-pointer" @click="remove">Нажмите для подтверждения</span>
    </div>
    <span
      class="text-xs text-red font-semibold hover:underline cursor-pointer"
      @click="showPopupRemove"
    >
      {{ show ? 'отменить' : text }}
    </span>
  </div>
</template>
