<template>
    <header>
        <div class="site-title">
            <div class="container flex justify-between">
                <div class="row w-fit items-center">
                    <div class="row flex">
                        <img width="48" height="48" src="/favicon.ico" alt="*nix" class="text-2xl mr-4"></img>
                        <img width="124" height="20" src="/wordmark.svg" alt="in Thailand" class="text-2xl my-[13px]"></img>
                    </div>
                </div>
                <div class="hidden sm:flex w-fit items-center justify-end">
                    <div class="row">
                        <UFieldGroup>
                            <UButton size="sm" :label="t('sites.join-discord')" to="https://discord.gg/p5wuX5GwB7" icon="i-lucide-users" />
                            <UDropdownMenu
                                size="sm"
                                :items="siteTitleItems"
                                :content="{
                                    align: 'end',
                                    side: 'bottom',
                                    sideOffset: 8
                                }"
                                :ui="{
                                    content: 'w-36'
                                }"
                            >
                                <UButton size="sm" :label="t('sites.all')" icon="i-lucide-map" color="neutral" variant="outline" />
                            </UDropdownMenu>
                        </UFieldGroup>
                    </div>
                </div>
            </div>
        </div>
        <nav class="site-navbar">
            <div class="container">
                <div class="hidden sm:flex">
                    <ul class="nav navbar-nav">
                        <li class="nav-link">
                            <NuxtLinkLocale href="/">{{ t('nav.home') }}</NuxtLinkLocale>
                        </li>
                        <li class="nav-link">
                            <NuxtLinkLocale href="/about">{{ t('nav.about') }}</NuxtLinkLocale>
                        </li>
                        <li class="nav-link">
                            <NuxtLinkLocale href="/contact">{{ t('nav.contact') }}</NuxtLinkLocale>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</template>

<script lang="ts" setup>
const { t } = useI18n();
const siteTitleItems = ref<DropdownMenuItem[]>([
  {
    label: t('sites.wiki'),
    icon: 'i-lucide-book-open-text',
    to: 'https://wiki.unix.in.th'
  },
  {
    label: t('sites.identity'),
    icon: 'i-lucide-user',
    to: 'https://identity.unix.in.th'
  },
  {
    label: t('sites.forum'),
    icon: 'i-lucide-messages-square',
    to: 'https://forum.unix.in.th'
  },
  {
    label: t('sites.status'),
    icon: 'i-lucide-activity',
    to: 'https://status.unix.in.th'
  },
])
</script>