<template>
    <div class="flex w-full justify-between items-center gap-2">
        <div class="flex flex-grow">
            <UDropdown class="flex flex-grow" :items="items">
                <UButton class="flex flex-grow items-center gap-2" color="gray" variant="ghost">
                    <UAvatar src="https://csdn-665-inscode.s3.cn-north-1.jdcloud-oss.com/inscode/202303/622eda98dfef6c4fdb84ccca/1680089871598-75919715-hvlk99ddLLhyNTXtl4TaQAgeFBFz4ZGD/avatar" />
                    <div>Aresn</div>
                    <UIcon name="i-heroicons-chevron-down-20-solid" />
                </UButton>
            </UDropdown>
        </div>
        <UButton
            :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
            color="white"
            aria-label="Theme"
            @click="isDark = !isDark"
        />
    </div>
</template>
<script setup>
const colorMode = useColorMode()
const isDark = computed({
    get () {
        return colorMode.value === 'dark'
    },
    set () {
        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
    }
})

const items = [
    [
        {
            label: '账号信息',
            icon: 'i-heroicons-user'
        },
        {
            label: '用户反馈',
            icon: 'i-heroicons-chat-bubble-oval-left-ellipsis'
        }
    ],
    [
        {
            label: '退出登录',
            icon: 'i-heroicons-power'
        }
    ]
]
</script>
