<script setup lang="ts">
/**
 * Icon — renders a Lucide icon by kebab-case name (matches the design system's
 * string `icon` prop API, e.g. <Icon name="refresh-cw" />). Maps to
 * `lucide-vue-next` via a registry so the bundle only ships icons we use.
 * Lucide icons render with `currentColor`, so they theme to the parent's color.
 * Add new icons to `registry` as the port grows.
 */
import type { Component } from 'vue'
import { computed } from 'vue'
import {
  Play, Pause, RefreshCw, Trash2, Settings, Terminal, Power, Box, Sun, Moon,
  Loader, LoaderCircle, TrendingUp, TrendingDown, Minus, Plus, Server, Users,
  Puzzle, FolderOpen, Cpu, BarChart3, Rocket, TriangleAlert, Bell, Search,
  ChevronDown, ChevronRight, ChevronLeft, ChevronUp, Check, X, Calendar, Clock,
  ShoppingCart, CreditCard, HardDrive, Activity, Shield, Download, Upload,
  Wifi, WifiOff, Map, Gauge, Gift, Flame, DoorOpen, Pickaxe, Swords, Crosshair,
  Navigation, MessageSquare, FileText, Bookmark, ExternalLink, Copy, LogOut,
  Eye, EyeOff, Globe, Key, Layers, List, MoreVertical, Zap,
  Info, OctagonAlert, CircleCheck, Sparkles, Inbox,
  LayoutDashboard, CalendarClock, Drama, ChevronsUpDown, ServerCog,
  LayoutGrid, SquareDashed, MemoryStick, CornerDownLeft,
  Ban, Flag,
  CircleAlert, ArrowDown, Award, DollarSign, FlaskConical, Mail, Package,
  Pencil, Save, ShoppingBag, Target, User,
  // Marketing site additions
  Route, Timer, Megaphone, DatabaseBackup, Store, Undo2,
  Circle, Send, HelpCircle,
} from 'lucide-vue-next'

const props = withDefaults(
  defineProps<{ name: string; size?: number; strokeWidth?: number }>(),
  { size: 16, strokeWidth: 2 },
)

const registry: Record<string, Component> = {
  play: Play, pause: Pause, 'refresh-cw': RefreshCw, 'trash-2': Trash2,
  settings: Settings, terminal: Terminal, power: Power, box: Box, sun: Sun,
  moon: Moon, loader: LoaderCircle, 'loader-2': Loader, 'trending-up': TrendingUp,
  'trending-down': TrendingDown, minus: Minus, plus: Plus, server: Server,
  users: Users, puzzle: Puzzle, 'folder-open': FolderOpen, cpu: Cpu,
  'bar-chart-3': BarChart3, rocket: Rocket, 'triangle-alert': TriangleAlert,
  bell: Bell, search: Search, 'chevron-down': ChevronDown,
  'chevron-right': ChevronRight, 'chevron-left': ChevronLeft, 'chevron-up': ChevronUp,
  check: Check, x: X, calendar: Calendar, clock: Clock,
  'shopping-cart': ShoppingCart, 'credit-card': CreditCard, 'hard-drive': HardDrive,
  activity: Activity, shield: Shield, download: Download, upload: Upload,
  wifi: Wifi, 'wifi-off': WifiOff, map: Map, gauge: Gauge, gift: Gift,
  flame: Flame, 'door-open': DoorOpen, pickaxe: Pickaxe, swords: Swords,
  crosshair: Crosshair, navigation: Navigation, 'message-square': MessageSquare,
  'file-text': FileText, bookmark: Bookmark, 'external-link': ExternalLink,
  copy: Copy, 'log-out': LogOut, eye: Eye, 'eye-off': EyeOff, globe: Globe,
  key: Key, layers: Layers, list: List, 'more-vertical': MoreVertical, zap: Zap,
  info: Info, 'octagon-alert': OctagonAlert, 'circle-check': CircleCheck,
  sparkles: Sparkles, inbox: Inbox,
  'layout-dashboard': LayoutDashboard, 'calendar-clock': CalendarClock, drama: Drama,
  'chevrons-up-down': ChevronsUpDown, 'server-cog': ServerCog, 'layout-grid': LayoutGrid,
  'square-dashed': SquareDashed, 'memory-stick': MemoryStick, 'corner-down-left': CornerDownLeft,
  ban: Ban, flag: Flag,
  'alert-circle': CircleAlert, 'arrow-down': ArrowDown, award: Award,
  'dollar-sign': DollarSign, 'flask-conical': FlaskConical, mail: Mail,
  package: Package, pencil: Pencil, save: Save, 'shopping-bag': ShoppingBag,
  target: Target, user: User,
  // Marketing site additions
  route: Route, timer: Timer, megaphone: Megaphone,
  'database-backup': DatabaseBackup, store: Store, 'undo-2': Undo2,
  circle: Circle, send: Send, 'help-circle': HelpCircle,
}

const cmp = computed<Component | null>(() => registry[props.name] ?? null)
</script>

<template>
  <component
    :is="cmp"
    v-if="cmp"
    class="cc-icon"
    :size="size"
    :width="size"
    :height="size"
    :stroke-width="strokeWidth"
    aria-hidden="true"
  />
</template>

<style>
.cc-icon { display: inline-block; flex: none; vertical-align: middle; }
</style>
