<script setup lang="ts">
import ModeToggle from './ModeToggle.vue';
import ThemeSelector from './ThemeSelector.vue';

const colorMode = useColorMode()
const logoPath = computed(() => {
    return colorMode.value === 'dark' ? 'logo-dark.png' : 'logo.png'
})
</script>

<template>
    <div class="flex items-center justify-center w-full p-4 gap-8 border-b">
        <div>
            <ClientOnly>
                <NuxtImg :src="logoPath" width="48" height="48" />
            </ClientOnly>
        </div>
        <div>
            <Button variant="ghost">
                Home
            </Button>
            <Button variant="ghost">
                Social
            </Button>
            <Button variant="ghost">
                Forum
            </Button>
        </div>
        <div class="flex gap-4">
            <ModeToggle />
            <ThemeSelector />
        </div>
    </div>
</template>
