<script setup lang="ts">
import type { TagsInputItemDeleteProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { TagsInputItemDelete, useForwardProps } from 'reka-ui';
import { computed } from 'vue';
import { cn, omitClass } from '@/lib/utils';

const props = defineProps<
  TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }
>();

const delegatedProps = computed(() => omitClass(props));

const forwardedProps = useForwardProps(delegatedProps);
</script>

<template>
  <TagsInputItemDelete
    data-slot="tags-input-item-delete"
    :class="
      cn(
        'hover:bg-secondary-foreground/20 focus-visible:border-ring focus-visible:ring-ring/50 -mr-0.5 flex size-4 items-center justify-center rounded-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px]',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M18 6 6 18" />
        <path d="m6 6 12 12" />
      </svg>
    </slot>
  </TagsInputItemDelete>
</template>
