<template>
  <BmsTooltip
    :activated="activated"
    :tooltip-text="tooltipText"
    :direction="tooltipDirection"
  >
    <UiButton
      v-bind="$attrs"
      icon
      :to="to"
      :target="target"
      :color="mode"
      :small="small"
    >
      <slot></slot>
    </UiButton>
  </BmsTooltip>
</template>

<script setup lang="ts">
import { RouteLocationRaw } from 'vue-router';
import UiButton from './UiButton.vue';
import { computed, ComputedRef } from 'vue';
import { StatusType } from '@/models';
import { BmsTooltip, TooltipDirection } from '@/index';

interface Props {
  to?: RouteLocationRaw | null;
  target?: string;
  mode?: StatusType.Danger | StatusType.Information;
  tooltipText?: string;
  tooltipDirection?: TooltipDirection;
  small?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  mode: StatusType.Information,
  to: null,
  tooltipText: '',
  small: false,
});

const activated: ComputedRef<boolean> = computed(() => !!props.tooltipText);
</script>
