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

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

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

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

<template>
  <TagsInputItem
    data-slot="tags-input-item"
    :class="
      cn(
        'bg-secondary text-secondary-foreground data-[state=active]:border-ring data-[state=active]:ring-ring/50 inline-flex h-6 shrink-0 items-center gap-1 rounded-sm border px-1 text-xs font-medium transition-[color,box-shadow] data-[state=active]:ring-[3px] [&[data-disabled]]:opacity-50 [&>button]:shrink-0',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot />
  </TagsInputItem>
</template>
