<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': !active,
    }"
    :to="to"
    class="px-4 py-3 flex items-center gap-2 rounded-lg transition cursor-pointer"
  >
    <Icon :name="icon" class="text-xl inline"/>
    <h1 class="text-[14px] font-medium">{{ label }}</h1>
  </NuxtLink>
</template>

<style scoped>

</style>