<template>
  <v-tooltip bottom>
    <v-btn v-if="withButton" v-on:click="$emit('icon-clicked')" slot="activator" icon>
      <v-icon :size="iconSize" :color="color" :aria-label="ariaLabelText">{{ iconName }}</v-icon>
    </v-btn>

    <v-icon
      v-else
      v-on:click="$emit('icon-clicked')"
      class="nx-tooltip-icon"
      slot="activator"
      :size="iconSize"
      :aria-label="ariaLabelText"
      :color="color"
    >
      {{ iconName }}
    </v-icon>
    <span>{{ tooltipText }}</span>
  </v-tooltip>
</template>

<script>
export default {
  name: 'NxTooltipIcon',
  props: {
    iconName: { type: String },
    tooltipText: { type: String },
    ariaLabelText: { type: String },
    color: { type: String },
    iconSize: { type: String },
    withButton: { type: Boolean }
  }
};
</script>

<style>
.nx-tooltip-icon {
  cursor: pointer;
}
</style>
