<script setup lang="ts">
import { Search } from 'lucide-vue-next';
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">
            <InputGroup>
                <InputGroupInput placeholder="Search..." />
                <InputGroupAddon>
                    <Search />
                </InputGroupAddon>
            </InputGroup>
            <ModeToggle />
            <ThemeSelector />
        </div>
    </div>
</template>
