<template>
    <li>
        <RouterLink v-if="to" :to="to" class="block px-2 py-1 rounded hover:bg-gray-700 hover:text-white" role="menuitem">
            {{ text }}
        </RouterLink>
        <button v-else @click="$emit('click')" class="w-full text-left px-2 py-1 rounded hover:bg-gray-700 hover:text-white" role="menuitem">
            {{ text }}
        </button>
    </li>
</template>

<script setup>
    defineProps({
        text: {
            type: String,
            required: true
        },
        to: {
            type: String,
            default: null
        }
    });

    defineEmits(['click']);
</script>

<style lang="postcss" scoped>
    .router-link-exact-active {
        @apply text-green-600;
    }
</style>
