<script setup lang="ts">
import {
    SidebarMenu,
    SidebarMenuItem,
    SidebarMenuButton,
} from '@/components/ui/sidebar';

const route = useRoute();
</script>

<template>
    <SidebarMenu>
        <SidebarMenuItem>
            <NuxtLink to="/admin" as-child>
                <SidebarMenuButton
                    :is-active="route.path === '/admin'"
                    tooltip="Admin"
                >
                    <Icon name="lucide:settings" />
                    <span>Administration</span>
                </SidebarMenuButton>
            </NuxtLink>
            <SidebarMenuSub>
                <SidebarMenuSubItem>
                    <NuxtLink to="/admin/users" as-child>
                        <SidebarMenuSubButton
                            :is-active="route.path === '/admin/users'"
                        >
                            <Icon name="lucide:users" />
                            <span>Users</span>
                        </SidebarMenuSubButton>
                    </NuxtLink>
                    <NuxtLink to="/admin/warrens" as-child>
                        <SidebarMenuSubButton
                            :is-active="route.path === '/admin/warrens'"
                        >
                            <Icon name="lucide:folder-tree" />
                            <span>Warrens</span>
                        </SidebarMenuSubButton>
                    </NuxtLink>
                    <!-- <NuxtLink to="/admin/stats" as-child>
                        <SidebarMenuSubButton
                            :is-active="route.path === '/admin/stats'"
                        >
                            <Icon name="lucide:bar-chart-3" />
                            <span>Stats</span>
                        </SidebarMenuSubButton>
                    </NuxtLink> -->
                </SidebarMenuSubItem>
            </SidebarMenuSub>
        </SidebarMenuItem>
    </SidebarMenu>
</template>
