<template>
  <div :class="[type ? `text--${type}` : '']" v-bind="$attrs">
    <i :class="icon" v-if="icon"></i>
    <span v-if="$slots.default" class="el-link--inner">
      <slot></slot>
    </span>

    <template v-if="$slots.icon">
      <slot v-if="$slots.icon" name="icon"></slot>
    </template>
  </div>
</template>

<script>

export default {
  name: 'TextLabel',

  props: {
    type: {
      type: String,
      default: 'default'
    },
    icon: String
  },
};
</script>
<style scoped lang="scss">
@import "../../styles/variables";

.text--primary {
  color: $--color-primary;
}

.text--success {
  color: $--color-success;
}

.text--warning {
  color: $--color-warning;
}

.text--danger {
  color: $--color-danger;
}

.text--info {
  color: $--color-info;
}

.text--default {
  color: black;
}
</style>
