<template>
    <button
        @click="$emit('click')"
        :disabled="disabled"
        :class="[
            'flex flex-col items-center justify-center min-h-12 sm:min-h-14 w-min px-2 sm:ml-4 ml-1 rounded group text-white',
            active
                ? 'text-green-500' // Style actif
                : 'hover:text-green-500', // Effet de survol
            disabled ? 'opacity-40 cursor-not-allowed' : ''
        ]"
        :aria-label="label || 'Toolbar button'">
        <component v-if="icon" :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" />
        <ToolbarLabel :label="label" />
    </button>
</template>

<script setup>
    import ToolbarLabel from './ToolbarLabel.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
        },
        disabled: {
            type: Boolean,
            default: false
        }
    });

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