<script lang="ts" setup>
import { computed } from 'vue'
import { NAvatar, useOsTheme } from 'naive-ui'
import { useUserStore, useAppStore } from '@/store'
import { isString } from '@/utils/is'
import defaultAvatar from '@/assets/avatar.png'
import { useTheme } from '@/hooks/useTheme'

interface Props {
    image?: boolean
}
defineProps<Props>()

const userStore = useUserStore()
const avatar = computed(() => userStore.userInfo.avatar)

const OsTheme = useOsTheme()
const appStore = useAppStore()
const { isDark } = useTheme()
</script>

<template>
    <template v-if="image">
        <NAvatar
            :size="32"
            v-if="isString(avatar) && avatar.length > 0"
            :style="{ backgroundColor: 'transparent' }"
            :src="avatar"
            :fallback-src="defaultAvatar"
        />
        <NAvatar :size="32" v-else :src="defaultAvatar" :style="{ backgroundColor: 'transparent' }" />
    </template>
    <span v-else class="text-[28px] dark:text-white">
        <img src="@/assets/logo.png" v-if="isDark" alt="" />
        <img src="@/assets/logo1.png" v-else alt="" />
    </span>
</template>
