<template>
  <a class="mm-typo-link">
    <slot></slot>
    <span v-if="!isHideIcon" :class="{
        'mm-typo-link-icon': true,
        [`mm-typo-link-icon__${showIcon}`]: !isHideIcon
      }">
      <slot name="icon">
        <ui-icon name="new_window" />
      </slot>
    </span>
  </a>
</template>

<script>
import config from "../../managers/config"
import Icon from "../icon"

config.defaults({
  "TypoLink.showIcon": "hover",
})

export default {
  name: "mm-typo-link",
  components: {
    "ui-icon": Icon,
  },
  props: {
    showIcon: {
      type: String,
      default: () => config.get("TypoLink.showIcon"),
      validator(value) {
        return ["always", "hover", "hide"].includes(value)
      },
    }
  },
  computed: {
    isHideIcon(){
      return this.showIcon === 'hide'
    }
  },
}
</script>
