<script setup lang="ts">
const props = defineProps({
  icon: {
    type: String,
    default: 'i-tabler-photo-filled',
  },
  label: {
    type: String,
    required: true,
  },
  to: {
    type: String,
    required: true,
  },
  admin: {
    type: Boolean,
    default: false,
  },
  hide: {
    type: Boolean,
    default: 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>