<template>
  <span
    class="nv-icon inline-flex items-center justify-center"
    :class="!customSize ? sizeableClasses : undefined"
    :style="{ width: customSize, height: customSize }"
  >
    <component
      v-if="useIconComponent"
      :is="useIconComponent"
      :width="customSize"
      :height="customSize"
    />
    <i
      v-else
      :class="[iconPrefix, icon, customClass]"
      :style="{ fontSize: customSize }"
    />
  </span>
</template>

<script>
import { computed } from "vue";

import useSize, { useSizeProps } from "../../composables/sizeable";

export default {
  props: {
    icon: String,
    customClass: String,
    component: String,
    ...useSizeProps,
  },
  setup(props) {
    const { sizeableClasses, customSize } = useSize(props);

    const iconPrefix = computed(() => {
      let res = "";
      if (props.icon) {
        const delimiterIndex = props.icon.indexOf("-");
        res = props.icon.slice(0, delimiterIndex);
      }
      return res;
    });

    const iconName = computed(() => {
      let res = "";
      if (props.icon) {
        const delimiterIndex = props.icon.indexOf("-");
        res = props.icon.slice(delimiterIndex + 1);
      }
      return res;
    });

    const useIconComponent = computed(() => {
      return (
        props.component ||
        (iconPrefix.value === "nvi" ? `nvi-${iconName.value}` : undefined)
      );
    });

    return {
      sizeableClasses,
      iconPrefix,
      customSize,
      useIconComponent,
    };
  },
};
</script>
