<template>
  <ui-icon
    v-if="type"
    :name="type"
    :fill="iconColor"
    size="48px"
    class="mm-dialog-type-icon"></ui-icon>
</template>
<script>
import Icon from "../icon"

const ICON_COLOR_MAP = {
  success: "#4bca81",
  info: "#706e6b",
  warning: "#ffb75d",
  error: "#c23934",
}

export default {
  components: {
    "ui-icon": Icon,
  },
  props: {
    type: {
      type: String,
      default: "",
      validator: function(value) {
        return !value || ["success", "info", "warning", "error"].includes(value)
      },
    },
  },
  computed: {
    iconColor() {
      return ICON_COLOR_MAP[this.type || "info"]
    },
  },
}
</script>
