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

defineProps({
    label: {
        type: String,
        default: '',
    },
    icon: {
        type: String,
        required: true,
        default: null,
    },
    color: {
        type: String,
        default: 'primary',
    },
    tooltip: {
        type: String,
        default: null,
    },
});
const popupProxyRef = ref(null);
</script>

<template>
    <QBtn :color="$props.color" :icon="$props.icon" :label="$t($props.label)">
        <template #default>
            <slot name="extraIcon"></slot>
            <QPopupProxy ref="popupProxyRef" style="max-width: none">
                <QCard>
                    <slot :popup="popupProxyRef"></slot>
                </QCard>
            </QPopupProxy>
            <QTooltip>{{ $t($props.tooltip) }}</QTooltip>
        </template>
    </QBtn>
</template>
