<template>
    <Listbox v-slot="{ open }" :model-value="modelValue" @update:modelValue="updateValue">
        <div class="relative">
            <slot name="button" />
            <Transition enter="transition ease-out duration-100" enter-from="transform opacity-0 scale-95"
                enter-to="transform opacity-100 scale-100" leave="transition ease-in duration-75"
                leave-from="transform opacity-100 scale-100" leave-to="transform opacity-0 scale-95">
                <ListboxOptions v-if="open"
                    class="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-dark dark:text-white sm:text-sm">
                    <slot />
                </ListboxOptions>
            </Transition>
        </div>
    </Listbox>
</template>

<script setup lang="ts">
import { Listbox, ListboxOptions } from '@headlessui/vue'
import { ref } from 'vue'

const props = defineProps<{ modelValue: unknown }>()
const emit = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>()

function updateValue(value: unknown) {
    emit('update:modelValue', value)
}
</script>