<AisAutocomplete>

<template>
  <div>
    <AisInstantSearch :widgets :configuration>
      <AisAutocomplete>
        <template #default="{ currentRefinement, indices, refine }">
          <input
            type="search"
            :value="currentRefinement"
            placeholder="Search for a product"
            @input="refine(($event.currentTarget as HTMLInputElement).value)"
          >
          <ul
            v-for="index in indices"
            :key="index.indexId"
          >
            <li>
              <h3>{{ index.indexName }}</h3>
              <ul>
                <li
                  v-for="hit in index.hits"
                  :key="hit.objectID"
                >
                  <ais-highlight
                    attribute="name"
                    :hit="hit"
                  />
                  <button
                    type="button"
                    @click="index.sendEvent('click', hit, 'Item Added')"
                  >
                    Add to cart
                  </button>
                </li>
              </ul>
            </li>
          </ul>
        </template>
      </AisAutocomplete>
    </AisInstantSearch>
  </div>
</template>

<script setup lang="ts">
const widgets = computed(() => [
  useAisAutocomplete({}),
]);
</script>