<script setup lang="ts">
import type { SidebarMenuButtonVariants } from '~/components/pub/ui/sidebar'
import { useSidebar } from '~/components/pub/ui/sidebar'

withDefaults(
  defineProps<{
    item: any
    size?: SidebarMenuButtonVariants['size']
  }>(),
  {
    size: 'default',
  },
)

const { setOpenMobile } = useSidebar()

const openCollapsible = ref(false)
</script>

<template>
  <SidebarMenu>
    <Collapsible :key="item.title" v-model:open="openCollapsible" as-child class="group/collapsible ">
      <SidebarMenuItem>
        <CollapsibleTrigger as-child>
          <SidebarMenuButton :tooltip="item.title" :size="size" class="md:!text-xs 2xl:!text-sm">
            <Icon :name="item.icon || ''" mode="svg" />
            <span class="mx-2">{{ item.title }}</span>
            <Icon
              name="i-lucide-chevron-right"
              class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
            />
          </SidebarMenuButton>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <SidebarMenuSub>
            <SidebarMenuSubItem v-for="subItem in item.children" :key="subItem.title">
              <SidebarMenuSubButton as-child>
                <NuxtLink
                  :to="subItem.link"
                  class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm"
                  active-class="bg-primary text-white"
                  @click="setOpenMobile(false)"
                >
                  <span>{{ subItem.title }}</span>
                </NuxtLink>
              </SidebarMenuSubButton>
            </SidebarMenuSubItem>
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>
    </Collapsible>
  </SidebarMenu>
</template>

<style scoped></style>
