<script setup>
import { reactiveOmit } from "@vueuse/core";
import { Icon } from "@iconify/vue";
import { ListboxFilter, useForwardProps } from "reka-ui";
import { cn } from "../../../utils/cn";
import { useCommand } from ".";
defineOptions({
  inheritAttrs: false
});
const props = defineProps({
  modelValue: { type: String, required: false },
  autoFocus: { type: Boolean, required: false },
  disabled: { type: Boolean, required: false },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const delegatedProps = reactiveOmit(props, "class");
const forwardedProps = useForwardProps(delegatedProps);
const { filterState } = useCommand();
</script>

<template>
  <div
    data-slot="command-input-wrapper"
    class="flex h-10 items-center gap-2 border-b border-zinc-200 px-3"
  >
    <Icon
      icon="fluent:search-20-filled"
      class="size-4 shrink-0 opacity-50"
    />
    <ListboxFilter
      v-bind="{ ...forwardedProps, ...$attrs }"
      v-model="filterState.search"
      data-slot="command-input"
      auto-focus
      :class="cn('placeholder:text-zinc-700 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
    />
  </div>
</template>
