<template>
  <span class="inline-block">
    <FAIcon :icon="icon.definition" :class="icon.classes"/>
  </span>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
import {coreCustomizations} from "@c/icon/ais-icons";
import { pick, isObject } from "@/util/util";
import {CoreIcons} from "../../util/BaseType";
// this prevents the icons from getting very large upon page refresh
// before settling to actual size (e.g. menu icon in header)
// This adds about 5k to our stylesheet. Is this the right way to include this?
import '@fortawesome/fontawesome-svg-core/styles.css';

interface Props {
  icon?: CoreIcons
}

const props = withDefaults(defineProps<Props>(), {
  icon: undefined
});

// const props = defineProps({
//   ...iconProps
// })

const icon = computed(() => {
  let definition = undefined
  let classes = ['icon']

  if(isObject(props.icon)) {
    definition = props.icon

  } else {
    let normalizedIcon = pick(props.icon).trim().toLowerCase()
    // definition = coreIconMap[normalizedIcon]
    definition = normalizedIcon
    classes.push(...coreCustomizations(normalizedIcon))
  }

  if(!definition) definition = 'unknown'
  return { definition, classes }
})
</script>
