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

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

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

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

<template>
  <ListboxItemIndicator
    data-slot="listbox-item-indicator"
    :class="cn('ml-auto inline-flex items-center justify-center', props.class)"
    v-bind="forwardedProps"
  >
    <slot>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M20 6 9 17l-5-5" />
      </svg>
    </slot>
  </ListboxItemIndicator>
</template>
