<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 gap-2" color="gray" variant="ghost">
                    <UAvatar :src="$info.avatar" />
                    <div>{{ $info.name }}</div>
                    <UBadge v-if="$info.pro" size="xs" color="purple" variant="soft" label="PRO" />
                    <UBadge v-else size="xs" color="gray" variant="soft" label="FREE" />
                    <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 { $isSignIn, $info } = useUserStore()
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>
