<template>
  <span class="ws-icon-btn">
    <v-tooltip
      :disabled="!tooltip"
      transition="none"
      :bottom="tooltipPosition=='bottom'"
      :top="tooltipPosition=='top'"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          v-ripple="{class:'buttonRipple--text'}"
          :color="color"
          outlined
          :to="to"
          v-bind="attrs"
          v-on="on"
          :disabled="disabled"
          :width="size"
          :height="size"
          x-small
          @click.stop="$emit('click',$event)"
        >
          <v-icon
            :size="iconSize"
            :color="iconColor"
          >
            <slot></slot>
          </v-icon>
        </v-btn>
      </template>
      <span>{{tooltip}}</span>
    </v-tooltip>
  </span>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    to: String,
    tooltipPosition: {
      type: String,
      default: "bottom"
    },
    iconColor: {
      type: String,
      default: "textSecondary"
    },
    color: {
      type: String,
      default: "inputBorder"
    },
    size: {
      type: Number,
      default: 40
    },
    iconSize: {
      type: Number,
      default: 20
    },
    tooltip: {
      type: String,
      default: null
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/ws-icon-btn.scss";
</style>