<script setup lang="ts">
export type NavItemProps = {
  label: string
  icon: string
  to: string
  admin?: boolean
  hide?: boolean
}

const props = withDefaults(defineProps<NavItemProps>(), {
  icon: 'i-tabler-photo-filled',
  admin: false,
  hide: false,
})

const route = useRoute()

const active = computed(() => {
  return route.path === props.to
})

const activeClass = computed(() => {
  return props.admin ? 'bg-amber-500 text-white' : 'bg-primary text-white'
})
</script>

<template>
  <NuxtLink
    v-if="!hide"
    :class="{
      [activeClass]: active,
      'hover:bg-neutral-200 dark:hover:bg-neutral-800': !active,
    }"
    :to="to"
    class="px-4 py-3 flex justify-between items-center rounded-lg transition cursor-pointer"
  >
    <div class="flex items-center gap-2">
      <Icon
        :name="icon"
        class="text-xl inline"
      />
      <h1 class="flex-1 text-[14px] font-medium line-clamp-1">
        {{ label }}
      </h1>
    </div>
    <UBadge
      v-if="admin"
      color="amber"
      label="OP"
      size="xs"
      variant="subtle"
    />
  </NuxtLink>
</template>

<style scoped></style>
