<template>
  <template v-if="variant === 'button'">
    <v-tooltip location="top" open-delay="1000">
      <template #activator="{ props: tooltip }">
        <v-btn v-bind="mergeProps($attrs, tooltip)" data-testid="button" variant="text" :color="color" :icon="icon" />
      </template>
      <span>{{ text }}</span>
    </v-tooltip>
  </template>
  <template v-if="variant == 'menu-item'">
    <v-list-item v-bind="$attrs" data-testid="menu-item" :prepend-icon="icon">
      <v-list-item-title>{{ text }}</v-list-item-title>
    </v-list-item>
  </template>
</template>

<script setup lang="ts">
import { mergeProps } from 'vue';

interface Props {
  text: string;
  icon: string;
  color?: string;
  variant?: 'button' | 'menu-item';
}

withDefaults(defineProps<Props>(), {
  color: 'white',
  variant: 'button'
});

defineOptions({
  inheritAttrs: false
});
</script>
