<template>
  <ElTooltip effect="dark" placement="right" :content="label" :show-after="600">
    <div class="vtj-apps__icon" :class="classes" @click="handleClick">
      <i :class="icon"></i>
    </div>
  </ElTooltip>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { ElTooltip } from 'element-plus';

interface Props {
  icon?: string;
  label?: string;
  active?: boolean;
  open?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  active: false,
  open: false
});

const emit = defineEmits(['click']);

const classes = computed(() => {
  return {
    'is-active': props.active,
    'is-open': props.open
  };
});

const handleClick = () => {
  emit('click');
};
</script>
