<template>
    <button
        @click="$emit('click')"
        :class="[
            'flex flex-col items-center justify-center p-1 rounded group text-white min-w-[50px]',
            active
                ? 'text-green-500' // Style actif
                : 'hover:text-green-500' // Effet de survol
        ]"
        :aria-label="label || 'Toolbar button'">
        <component v-if="icon" :is="icon" class="h-6 w-6 mb-1" />
        <span v-if="label" class="text-xs">{{ label }}</span>
    </button>
</template>

<script setup>
    import { computed } from 'vue';

    defineProps({
        icon: {
            type: [Object, Function], // Heroicons sont souvent importés comme des objets/fonctions
            required: false,
            default: null
        },
        label: {
            type: String,
            required: false,
            default: ''
        },
        active: {
            type: Boolean,
            default: false
        }
    });

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