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

<script setup>
    import { Link, usePage } 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 { request } = usePage().props

    const activeKey = ref(request.url)

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

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

    }

</script>