<template>
    <RouterLink :to="to" class="block px-4 py-2 hover:bg-gray-700 border-l-4 border-transparent" role="menuitem">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <component :is="icon" class="w-5 h-5 mr-3" aria-hidden="true" />
                <span>{{ text }}</span>
            </div>
            <span
                v-if="badge"
                class="bg-green-500 text-white text-xs px-2 py-1 rounded-full"
                aria-label="Nouveaux éléments: {{ badge }}">
                {{ badge }}
            </span>
        </div>
    </RouterLink>
</template>

<script setup>
    defineProps({
        icon: {
            type: Function,
            required: true
        },
        text: {
            type: String,
            required: true
        },
        to: {
            type: String,
            required: true
        },
        isActive: {
            type: Boolean,
            required: true
        },
        badge: {
            type: String,
            default: null
        }
    });
</script>

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