<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()
</script>

<template>
  <SidebarMenu>
    <SidebarMenuItem>
      <SidebarMenuButton as-child :tooltip="item.title" :size="size" class="">
        <NuxtLink
          :to="item.link"
          class="group flex items-center gap-3 rounded-lg px-2 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)"
        >
          <Icon :name="item.icon || ''" mode="svg" />
          <span class="mx-1">{{ item.title }}</span>
          <span
            v-if="item.new"
            class="bg-#adfa1d rounded-md px-1.5 py-0.5 text-xs leading-none text-black no-underline group-hover:no-underline "
          >
            New
          </span>
        </NuxtLink>
      </SidebarMenuButton>
    </SidebarMenuItem>
  </SidebarMenu>
</template>

<style scoped></style>
