<template>
  <div>
    <div v-if="IconComponent" @click="handleClick">
      <component :class="iconClasses" :is="IconComponent" />
    </div>
  </div>
</template>
<script setup>
import { defineEmits, onMounted, shallowRef } from "vue";
import * as Icons from "@/components/helpers/bundleIcons.js";

const props = defineProps({
  icon: {
    type: String,
    required: true,
  },
  iconClasses: {
    type: String,
    default: "h-8 w-8",
  },
});

const IconComponent = shallowRef(null);
const emit = defineEmits(["selectIcon"]);

const loadIcon = (name) => {
  try {
    IconComponent.value = Icons[name];
  } catch (error) {
    console.error(`Failed to load icon: ${name}`, error);
  }
};

const handleClick = () => {
  emit("selectIcon", props.icon);
};

onMounted(() => {
  loadIcon(props.icon);
});
</script>