<template>
  <div>
    <HeadlessCombobox  v-model="selectedPerson">
      <HeadlessComboboxInput class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0" @change="query = $event.target.value" />
      <HeadlessComboboxOptions class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
        <HeadlessComboboxOption class="mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"   v-for="person in filteredPeople" :key="person" :value="person">
          {{ person }}
        </HeadlessComboboxOption>
      </HeadlessComboboxOptions>
    </HeadlessCombobox>
    <h1>Home Page</h1>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'

const people = [
  'Wade Cooper',
  'Arlene McCoy',
  'Devon Webb',
  'Tom Cook',
  'Tanya Fox',
  'Hellen Schmidt',
]
const selectedPerson = ref(people[0])
const query = ref('')

const filteredPeople = computed(() =>
    query.value === ''
        ? people
        : people.filter((person) => {
          return person.toLowerCase().includes(query.value.toLowerCase())
        })
)
</script>