<script setup>
import { computed } from 'vue';
import * as LucideIcons from 'lucide-vue-next';

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  size: {
    type: [Number, String],
    default: 24,
  },
  color: {
    type: String,
    default: 'currentColor',
  },
  strokeWidth: {
    type: [Number, String],
    default: 2,
  },
});

const icon = computed(() => {
  // Lucide 图标通常是 PascalCase，用户输入可能是 kebab-case
  const pascalName = props.name
    .split('-')
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join('');

  return LucideIcons[pascalName] || LucideIcons[props.name] || null;
});
</script>

<template>
  <component :is="icon" v-if="icon" :size="size" :color="color" :stroke-width="strokeWidth" class="lucide-icon" />
  <span
    v-else
    class="lucide-icon-fallback"
    :style="{ width: size + 'px', height: size + 'px', display: 'inline-block' }"
  ></span>
</template>
