<script setup lang="ts">
import { computed, h } from 'vue'
import * as LucideIcons from 'lucide-vue-next'
import type { LucideProps } from 'lucide-vue-next'

interface Props {
  name: string
  className?: string
  style?: Record<string, any>
  size?: number | string
}

const props = withDefaults(defineProps<Props>(), {
  className: '',
  style: () => ({}),
  size: 24
})

// 将kebab-case转换为PascalCase，例如 arrow-left -> ArrowLeft
const toPascalCase = (str: string) => {
  return str.split('-').map(word => 
    word.charAt(0).toUpperCase() + word.slice(1)
  ).join('')
}

// 确保 size 是 number 类型
const iconSize = computed(() => {
  if (typeof props.size === 'string') {
    const parsed = parseInt(props.size, 10)
    return isNaN(parsed) ? 24 : parsed
  }
  return props.size ?? 24
})

const iconComponent = computed(() => {
  const iconName = toPascalCase(props.name) as keyof typeof LucideIcons
  const Icon = LucideIcons[iconName] || LucideIcons.AlertCircle
  return () => h(Icon as any, {
    class: props.className,
    style: props.style,
    size: iconSize.value
  } as LucideProps)
})
</script>

<template>
  <component :is="iconComponent" />
</template>