<template>
  <span
    class="inline-flex items-center gap-x-0.5 rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10">
    <slot> Tag </slot>
    <button type="button"  @click="removeTag" class="group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-indigo-600/20">
      <svg viewBox="0 0 14 14" class="h-3.5 w-3.5 stroke-indigo-600/50 group-hover:stroke-indigo-600/75">
        <path d="M4 4l6 6m0-6l-6 6" />
      </svg>
      <span class="absolute -inset-1" />
    </button>
  </span>
</template>

<script setup lang="ts">

const props = defineProps({
  item: {
    type: Object,
    required: true,
  }
})

const emits = defineEmits(['removeTag'])

const removeTag = () => {
  emits('removeTag', props.item)
}
</script>
