<script setup lang="ts">
const props = defineProps<{
  icon?: string
  active?: boolean
}>()
</script>
<template>
  <a
    class="mt-1 block w-full cursor-pointer truncate rounded hover:bg-gray-200 active:bg-primary active:text-primary-content max-sm:mt-2"
    :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
  >
    <i :class="props.icon" class="mr-2" v-if="props.icon"></i>
    <slot></slot>
  </a>
</template>
