<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import {
    SidebarGroup,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { useCurrentUrl } from '@/composables/useCurrentUrl';
import { resolveNavIcon } from '@/lib/navIcons';
import type { NavSection } from '@/types';

defineProps<{
    sections: NavSection[];
}>();

const { isCurrentOrParentUrl } = useCurrentUrl();
</script>

<template>
    <SidebarGroup v-for="section in sections" :key="section.label" class="px-2 py-0">
        <SidebarGroupLabel class="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">
            {{ section.label }}
        </SidebarGroupLabel>
        <SidebarMenu>
            <SidebarMenuItem v-for="item in section.items" :key="item.route">
                <SidebarMenuButton
                    as-child
                    :is-active="isCurrentOrParentUrl(item.href)"
                    :tooltip="item.label"
                >
                    <Link :href="item.href" class="group/link">
                        <component :is="resolveNavIcon(item.icon)" />
                        <span>{{ item.label }}</span>
                    </Link>
                </SidebarMenuButton>
            </SidebarMenuItem>
        </SidebarMenu>
    </SidebarGroup>
</template>

<style scoped>
/* Override active state dengan brand color Meta blue */
:deep([data-slot='sidebar-menu-button'][data-active='true']) {
    background-color: #1877F2 !important;
    color: #fff !important;
}
:deep([data-slot='sidebar-menu-button'][data-active='true'] svg) {
    color: #fff !important;
}
/* Hover non-active: subtle blue tint */
:deep([data-slot='sidebar-menu-button']:not([data-active='true']):hover) {
    background-color: #1877F215 !important;
    color: #1877F2 !important;
}
:deep([data-slot='sidebar-menu-button']:not([data-active='true']):hover svg) {
    color: #1877F2 !important;
}
</style>
