import type { Vertical } from '@/lib/demo-kit/types';
import { iconFor } from '@/content/icons';
import { cn } from '@/lib/utils';

/**
 * `DemoMeta.icon` is a lucide NAME, not a component — types.ts explains why:
 * a component in the meta would drag lucide into the entry chunk for every
 * demo at once. `@/content/icons` is the one place that turns a name back into
 * a component, by name, so it stays tree-shaken. Resolve through it rather than
 * growing a second map here, or the same icon name renders as two different
 * glyphs depending on which surface you are looking at.
 */
export function DemoIcon({ name, className }: { name: string; className?: string }) {
  const Icon = iconFor(name);
  return <Icon aria-hidden="true" className={cn('size-4 shrink-0', className)} />;
}

/**
 * The registry groups demos by vertical and gives each group a label, but no
 * icon — an icon belongs to a demo, not to a taxonomy key. The header wants one
 * anyway, so this is the mapping, and it is exhaustive over the union: adding a
 * thirteenth vertical to the contract fails the build here rather than shipping
 * a blank square in the menu.
 */
export const VERTICAL_ICONS: Readonly<Record<Vertical, string>> = {
  reference: 'Grid3x3',
  support: 'Headset',
  healthcare: 'Stethoscope',
  insurance: 'ShieldCheck',
  'financial-crime': 'Siren',
  energy: 'Zap',
  logistics: 'Truck',
  code: 'Braces',
  retail: 'Tag',
  telecom: 'RadioTower',
  data: 'Table2',
  legal: 'Scale',
};
