<template>
    <Label class="my-2 flex flex-1 items-center justify-between flex-col md:flex-row">
        <span class="pb-1 md:p-0">{{ label }}</span>
        <SelectRoot v-model="model">
            <SelectTrigger :disabled="disabled" class="mx-4 inline-flex min-w-[160px] items-center justify-between px-3 text-sm font-semibold leading-none h-8 gap-1
                bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none data-[placeholder]:font-normal
                data-[placeholder]:text-light-50 dark:data-[placeholder]:text-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
                hover:border-light-50 dark:hover:border-dark-50">
                <SelectValue :placeholder="placeholder" />
                <Icon icon="radix-icons:caret-down" class="h-4 w-4" />
            </SelectTrigger>

            <SelectPortal :disabled="disabled">
                <SelectContent :position="position"
                    class="min-w-[160px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-50">
                    <SelectScrollUpButton>
                        <Icon icon="radix-icons:chevron-up" />
                    </SelectScrollUpButton>
                    <SelectViewport>
                        <slot />
                    </SelectViewport>
                    <SelectScrollDownButton>
                        <Icon icon="radix-icons:chevron-down" />
                    </SelectScrollDownButton>
                </SelectContent>
            </SelectPortal>
        </SelectRoot>
    </Label>
</template>

<script setup lang="ts">
import { SelectContent, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport } from 'radix-vue'
import { Icon } from '@iconify/vue/dist/iconify.js';
const { placeholder, disabled = false, position = 'popper', label } = defineProps<{
	placeholder?: string
    disabled?: boolean
    position?: 'item-aligned' | 'popper'
    label?: string
}>();
const model = defineModel<string>();
</script>