<script lang="ts">
  import {
    Plug,
    Cast,
    Radio,
    Music,
    Settings,
    Wifi,
    Speaker,
    Headphones,
    Volume2,
    Mic,
    Radar,
    Activity,
    Airplay,
    Bluetooth,
    Cloud,
    Database,
    Download,
    Eye,
    FileAudio,
    Globe,
    HardDrive,
    Heart,
    Home,
    Layers,
    Layout,
    Link,
    List,
    Monitor,
    Network,
    Package,
    Play,
    Power,
    Puzzle,
    RefreshCw,
    Rss,
    Server,
    Shield,
    Sliders,
    Square,
    Star,
    Terminal,
    Tv,
    Upload,
    Users,
    Zap,
    type Icon,
  } from "lucide-svelte";

  let {
    name = "plug",
    size = 20,
    class: className = "",
  }: {
    name?: string;
    size?: number;
    class?: string;
  } = $props();

  const iconMap: Record<string, typeof Plug> = {
    plug: Plug,
    cast: Cast,
    radio: Radio,
    music: Music,
    settings: Settings,
    wifi: Wifi,
    speaker: Speaker,
    headphones: Headphones,
    volume: Volume2,
    "volume-2": Volume2,
    mic: Mic,
    radar: Radar,
    activity: Activity,
    airplay: Airplay,
    bluetooth: Bluetooth,
    cloud: Cloud,
    database: Database,
    download: Download,
    eye: Eye,
    "file-audio": FileAudio,
    globe: Globe,
    "hard-drive": HardDrive,
    heart: Heart,
    home: Home,
    layers: Layers,
    layout: Layout,
    link: Link,
    list: List,
    monitor: Monitor,
    network: Network,
    package: Package,
    play: Play,
    power: Power,
    puzzle: Puzzle,
    "refresh-cw": RefreshCw,
    rss: Rss,
    server: Server,
    shield: Shield,
    sliders: Sliders,
    square: Square,
    star: Star,
    terminal: Terminal,
    tv: Tv,
    upload: Upload,
    users: Users,
    zap: Zap,
  };

  const ResolvedIcon = $derived(iconMap[name.toLowerCase()] ?? Plug);
</script>

<ResolvedIcon {size} class={className} />
