<script setup>
import { NFlex, NEl, NIcon, NText, NDivider } from 'naive-ui'
import { TbHeartRateMonitor } from 'vue-icons-plus/tb'
import AppUserButton from "./AppUserButton.vue"
import { Link } from "@inertiajs/vue3"
import { computed, useSlots } from "vue"
import { useThemeVars } from "naive-ui"

const slots     = useSlots()
const themeVars = useThemeVars()

const hasHeaderExtra = computed(() => {
    if (!slots.headerExtra) return false
    const content = slots.headerExtra()
    return content?.length > 0 && content[0].children?.length > 0
})
</script>

<template>
    <div class="grid grid-cols-[auto_1fr_auto] items-center px-4 w-full h-full">

        <!-- Лого -->
        <NFlex align="center" :size="10" :wrap="false">
            <component
                id="app-logo"
                :is="Link"
                href="/"
                style="text-decoration: none; display: flex; align-items: center; gap: 8px;"
            >
                <NEl
                    style="
                        width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
                        display: flex; align-items: center; justify-content: center;
                        background: color-mix(in srgb, var(--primary-color) 20%, transparent);
                    "
                >
                    <NIcon size="16" style="color: var(--primary-color);"><TbHeartRateMonitor /></NIcon>
                </NEl>
                <NText style="font-size: 14px;">
                    Метрика
                </NText>
            </component>

            <template v-if="hasHeaderExtra">
                <NDivider vertical style="height: 18px;" />
                <slot name="headerExtra" />
            </template>
        </NFlex>

        <!-- Центр (пусто или слот) -->
        <div></div>

        <!-- Пользователь -->
        <NFlex align="center" justify="end" :wrap="false">
            <slot name="headerSuffix" />
            <AppUserButton />
        </NFlex>

    </div>
</template>
