<template>
    <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
</template>

<script setup>
    import { Link } from '@inertiajs/vue3'
    import { h, ref } from 'vue';
    import { NIcon, NButton } from 'naive-ui'
    import {
        GroupsFilled as Users,
        EventNoteFilled as Events,
        LogOutFilled as Logout
    } from '@vicons/material'

    const activeKey = ref(null)

    const menuOptions = ref([
        {
            label: () =>
                h(
                    Link, {
                        href: "/Events",
                        methode: "get"
                    },
                    "Veranstaltungen"
                ),
                key: 'go-to-events',
                icon: renderIcon(Events)
        },
        {
            label: () =>
                h(
                    Link, {
                        href: "/Users",
                        method: "get"
                    },
                    "Benutzer"
                ),
                key: 'go-to-users',
                icon: renderIcon(Users)
        },
        {
            label: () =>
                h(
                    Link, {
                        href: "/Login",
                        method: "get"
                    },
                    "Abmelden"
                ),
                key: 'go-to-logout',
                icon: renderIcon(Logout)
        }
    ])

    function renderIcon(icon) {
        return () => h(NIcon, null, { default: () => h(icon) })

    }

</script>