<template>
  <component :is="dynamicComponent" />
</template>
<script>
const iconList = [
  "arrow-down",
  "arrow-up",
  "arrow-left",
  "arrow-right",
  "chevron-left",
  "chevron-down",
  "chevron-right",
  "chevron-up",
  "order-down",
  "order-up",
  "sub-right-arrow",
  "sub-left-arrow",
  "wait",
  "system-info",
  "system-help",
  "system-show",
  "system-hide",
  "system-location",
  "system-close",
  "system-search",
  "system-secure",
  "system-plus",
  "system-minus",
  "system-other-options",
  "system-drag-row",
  "system-products",
  "system-open-tab",
  "system-drag-page",
  "system-star",
  "system-star-outline",
  "system-item",
  "ui-time",
  "ui-add-calendar",
  "ui-hamburger-menu",
  "system-dummy",
  "system-status-success",
  "system-status-error",
  "system-status-info",
  "system-status-hint",
  "system-notification-dot",
  "ui-edit",
  "ui-duplicate",
  "ui-download-file",
  "ui-credit-card",
  "ui-invoice",
  "ui-image-change",
  "ui-delete",
  "ui-remove-user",
  "ui-support",
  "ui-date",
  "ui-payment",
  "ui-venue",
  "ui-play",
  "ui-home",
  "ui-check",
  "ui-premium",
  "ui-type",
  "ui-upload-file",
  "ui-live-streaming",
  "ui-pre-record",
  "ui-send",
  "ui-message",
  "ui-message-outline",
  "ui-bell",
  "ui-speaker-off",
  "ui-speaker1",
  "ui-speaker0",
  "ui-speaker-none",
  "ui-speaker",
  "ui-inbox",
  "ui-connection",
  "ui-pause",
  "ui-session",
  "ui-mic-on",
  "ui-mic-off",
  "ui-camera-off",
  "ui-camera-on",
  "system-leave-meeting",
  "ui-full-screen",
  "ui-full-screen-zoom",
  "ui-resize-video",
  "ui-sponsor",
  "ui-emoji",
  "ui-building",
  "ui-coffee",
  "ui-dashboard",
  "ui-report",
  "ui-event-program",
  "ui-engagement",
  "system-attachment",
  "system-send-up",
  "system-like",
  "system-liked",
  "system-mail",
  "system-phone",
  "system-add-contact",
  "system-person",
  "system-slide",
  "system-settings",
  "social-google",
  "social-facebook",
  "social-linkedin",
  "social-twitter",
  "mobile-app-venue",
  "mobile-app-registration",
  "mobile-app-attendees",
  "mobile-app-hotel",
  "mobile-app-workshop",
  "mobile-app-about-event",
  "mobile-app-app-store",
  "mobile-app-play-store",
  "mobile-app-box",
  "warning",
  "success",
  "claps",
  "social-apple",
  "ui-gift",
  "ui-flag",
  "package-abstract",
  "package-mobile",
  "package-participant",
  "package-virtual",
  "editor-link",
  "editor-undo",
  "speakers",
  "editor-image",
  "vm-youtube",
  "vm-zoom",
  "vm-vimeo",
  "vm-google-meet",
  "ui-clipboard",
  "system-mobile-phone",
  "ui-upset",
  "ui-smile",
  "share-screen",
  "system-group-chat",
  "ui-emoji-add",
  "system-poll",
  "ui-cam-check",
  "ui-hearth",
  "ui-mail-notification",
  "editor-bullet-list",
  "ui-line-graph",
  "editor-table",
  "system-increase",
  "system-decrease",
  "calendar-over-due",
  "plug-disconnected",
];

import { defineAsyncComponent } from "vue";

export default {
  name: "MhIcon",
  computed: {
    dynamicComponent() {
      //const name = this.name.replace(/-./g, (match) => match[1].toUpperCase());
      const name = "arrowDown.vue";

      return defineAsyncComponent(() => import(`${name}.vue`));
    },
  },
  props: {
    name: {
      type: String,
      required: true,
      validator: (_i) => iconList.includes(_i),
    },
  },
};
</script>
<style lang="scss" scoped>
.wait-spinner {
  animation: rotate 01s linear infinite;
  width: 14px;
  height: 14px;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
</style>
