import { icons, type LucideIcon } from 'lucide-react'

interface DynamicIconProps {
  name: string
  size?: number
  className?: string
  strokeWidth?: number
}

/**
 * Renders a Lucide icon by name string.
 * Names can be kebab-case ("shield-check") or PascalCase ("ShieldCheck").
 */
export function DynamicIcon({ name, size = 24, className, strokeWidth = 2 }: DynamicIconProps) {
  // Strip surrounding quotes if present (e.g. "shield" -> shield)
  const cleanName = name.replace(/^["']|["']$/g, '').trim()

  // Convert kebab-case to PascalCase: "shield-check" -> "ShieldCheck"
  const pascalName = cleanName
    .split('-')
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join('')

  const IconComponent = icons[pascalName as keyof typeof icons] as LucideIcon | undefined

  if (!IconComponent) {
    return null
  }

  return <IconComponent size={size} className={className} strokeWidth={strokeWidth} />
}
