---
/**
 * Icon.astro — 把原型里的 `<i data-lucide="name">` 机械替换为「构建期内联 SVG」。
 * 使用 lucide-react，但**不**水合（无 client: 指令）→ Astro 在构建期渲染成静态 <svg>，
 * 零运行时 JS、零第三方 CDN（原型用的是 unpkg.com 的 lucide，已按任务要求去除）。
 * 尺寸/描边颜色沿用 website.css 里对 `svg` 的选择器控制，故此处不强加尺寸。
 */
import * as Lucide from 'lucide-react';

interface Props {
  name: string;
  class?: string;
  [key: string]: unknown;
}

const { name, class: className, ...rest } = Astro.props;

// kebab-case → PascalCase（lucide-react 导出名）
const pascal = name
  .split('-')
  .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
  .join('');

// 个别图标的兜底别名（lucide 改名历史）。
const ALIASES: Record<string, string> = {
  CheckCircle: 'CircleCheckBig',
  CircleHelp: 'CircleHelp',
};

const lib = Lucide as unknown as Record<string, any>;
const Comp = lib[pascal] ?? lib[ALIASES[pascal] ?? ''] ?? null;

if (!Comp) {
  throw new Error(`[Icon] 未知 lucide 图标: "${name}" (尝试 ${pascal})`);
}
---
<Comp class={['lucide', className].filter(Boolean).join(' ')} {...rest} />