<script setup lang="ts">
import { computed } from 'vue';
import { icons } from 'lucide-vue-next';

const props = defineProps<{
  name: string;
  size?: number;
  class?: string;
}>();

const normalizeName = (value: string) =>
  value
    .split(/[-_ ]+/)
    .filter(Boolean)
    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
    .join('');

const iconComponent = computed(() => {
  const normalized = normalizeName(props.name);
  // @ts-expect-error dynamic lookup
  return icons[normalized] ?? icons.CircleHelp;
});
</script>

<template>
  <component :is="iconComponent" :size="props.size ?? 24" :class="props.class" />
</template>
