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

const props = defineProps<
  TagsInputRootProps & { class?: HTMLAttributes['class'] }
>();
const emits = defineEmits<TagsInputRootEmits>();

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

const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>

<template>
  <TagsInputRoot
    #default="slotProps"
    data-slot="tags-input"
    :class="
      cn(
        'border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border bg-background-input-default px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        props.class,
      )
    "
    v-bind="forwarded"
  >
    <slot v-bind="slotProps" />
  </TagsInputRoot>
</template>
