<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,
  },
})

const route = useRoute()

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

<template>
  <NuxtLink
      class="px-4 py-3 flex items-center gap-2 rounded-lg transition cursor-pointer"
      :class="active ? 'bg-primary text-white' : 'hover:bg-neutral-200'"
      :to="to"
  >
    <Icon :name="icon" class="text-xl inline"/>
    <h1 class="text-[14px] font-medium">{{ label }}</h1>
  </NuxtLink>
</template>

<style scoped>

</style>