import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import type { IconListProps } from '../../types';
import {
  // Checkmarks & Status
  Check,
  CheckCircle,
  CheckCircle2,
  CheckSquare,
  X,
  XCircle,
  AlertCircle,
  AlertTriangle,
  Info,
  HelpCircle,
  // Stars & Ratings
  Star,
  Sparkles,
  Award,
  Trophy,
  Medal,
  Crown,
  ThumbsUp,
  ThumbsDown,
  // Arrows & Navigation
  ArrowRight,
  ArrowLeft,
  ArrowUp,
  ArrowDown,
  ChevronRight,
  ChevronLeft,
  ChevronUp,
  ChevronDown,
  ChevronsRight,
  MoveRight,
  ExternalLink,
  // Hearts & Emotions
  Heart,
  HeartHandshake,
  Smile,
  Frown,
  Meh,
  Laugh,
  // Security & Protection
  Shield,
  ShieldCheck,
  Lock,
  Unlock,
  Key,
  Fingerprint,
  Eye,
  EyeOff,
  // Energy & Power
  Zap,
  Battery,
  BatteryCharging,
  Flame,
  Lightbulb,
  Sun,
  Moon,
  // Communication
  Mail,
  MailOpen,
  MessageCircle,
  MessageSquare,
  Phone,
  PhoneCall,
  Video,
  Mic,
  Volume2,
  Bell,
  BellRing,
  Send,
  Inbox,
  // Time & Calendar
  Clock,
  Timer,
  Calendar,
  CalendarCheck,
  CalendarDays,
  Hourglass,
  History,
  AlarmClock,
  // People & Users
  User,
  Users,
  UserPlus,
  UserCheck,
  UserCircle,
  Contact,
  PersonStanding,
  Baby,
  // Business & Commerce
  Briefcase,
  Building,
  Building2,
  Store,
  ShoppingCart,
  ShoppingBag,
  CreditCard,
  Wallet,
  Receipt,
  BadgeDollarSign,
  DollarSign,
  Banknote,
  PiggyBank,
  TrendingUp,
  TrendingDown,
  BarChart,
  BarChart2,
  PieChart,
  LineChart,
  // Documents & Files
  File,
  FileText,
  FileCheck,
  Files,
  Folder,
  FolderOpen,
  Clipboard,
  ClipboardCheck,
  ClipboardList,
  BookOpen,
  Book,
  Notebook,
  // Tools & Settings
  Settings,
  Wrench,
  Hammer,
  Cog,
  SlidersHorizontal,
  Palette,
  Paintbrush,
  Scissors,
  // Technology
  Laptop,
  Monitor,
  Smartphone,
  Tablet,
  Watch,
  Wifi,
  Bluetooth,
  Signal,
  Database,
  Server,
  Cloud,
  CloudDownload,
  CloudUpload,
  Download,
  Upload,
  Link,
  QrCode,
  // Media & Entertainment
  Play,
  Pause,
  Music,
  Headphones,
  Camera,
  Image,
  Film,
  Tv,
  Radio,
  Gamepad2,
  // Location & Travel
  MapPin,
  Map,
  Navigation,
  Compass,
  Globe,
  Plane,
  Car,
  Bus,
  Train,
  Ship,
  Bike,
  // Nature & Weather
  Leaf,
  TreePine,
  Flower2,
  Mountain,
  Waves,
  Droplet,
  Snowflake,
  CloudRain,
  Wind,
  Sunrise,
  // Food & Drink
  Coffee,
  UtensilsCrossed,
  Pizza,
  Apple,
  Cake,
  Wine,
  Beer,
  // Health & Medical
  HeartPulse,
  Stethoscope,
  Pill,
  Syringe,
  Thermometer,
  Activity,
  Accessibility,
  Brain,
  // Home & Lifestyle
  Home,
  Bed,
  Bath,
  Sofa,
  Lamp,
  Tv2,
  Refrigerator,
  WashingMachine,
  // Education
  GraduationCap,
  BookMarked,
  Library,
  PenTool,
  Pencil,
  Eraser,
  Ruler,
  Calculator,
  // Sports & Fitness
  Dumbbell,
  Target,
  Flag,
  Timer as Stopwatch,
  Footprints,
  // Misc
  Gift,
  Package,
  Box,
  Archive,
  Trash2,
  RefreshCw,
  RotateCcw,
  Maximize,
  Minimize,
  Plus,
  Minus,
  Percent,
  Hash,
  AtSign,
  Asterisk,
  Command,
  Terminal,
  Code,
  Braces,
  GitBranch,
  Rocket,
  Anchor,
  Compass as CompassIcon,
  Puzzle,
  Layers,
  Layout,
  Grid,
  List,
  Menu,
  MoreHorizontal,
  MoreVertical,
  Grip,
} from 'lucide-react';

const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
  // Checkmarks & Status
  check: Check,
  'check-circle': CheckCircle,
  'check-circle-2': CheckCircle2,
  'check-square': CheckSquare,
  x: X,
  'x-circle': XCircle,
  'alert-circle': AlertCircle,
  'alert-triangle': AlertTriangle,
  info: Info,
  'help-circle': HelpCircle,
  // Stars & Ratings
  star: Star,
  sparkles: Sparkles,
  award: Award,
  trophy: Trophy,
  medal: Medal,
  crown: Crown,
  'thumbs-up': ThumbsUp,
  'thumbs-down': ThumbsDown,
  // Arrows & Navigation
  'arrow-right': ArrowRight,
  'arrow-left': ArrowLeft,
  'arrow-up': ArrowUp,
  'arrow-down': ArrowDown,
  'chevron-right': ChevronRight,
  'chevron-left': ChevronLeft,
  'chevron-up': ChevronUp,
  'chevron-down': ChevronDown,
  'chevrons-right': ChevronsRight,
  'move-right': MoveRight,
  'external-link': ExternalLink,
  // Hearts & Emotions
  heart: Heart,
  'heart-handshake': HeartHandshake,
  smile: Smile,
  frown: Frown,
  meh: Meh,
  laugh: Laugh,
  // Security & Protection
  shield: Shield,
  'shield-check': ShieldCheck,
  lock: Lock,
  unlock: Unlock,
  key: Key,
  fingerprint: Fingerprint,
  eye: Eye,
  'eye-off': EyeOff,
  // Energy & Power
  zap: Zap,
  battery: Battery,
  'battery-charging': BatteryCharging,
  flame: Flame,
  lightbulb: Lightbulb,
  sun: Sun,
  moon: Moon,
  // Communication
  mail: Mail,
  'mail-open': MailOpen,
  'message-circle': MessageCircle,
  'message-square': MessageSquare,
  phone: Phone,
  'phone-call': PhoneCall,
  video: Video,
  mic: Mic,
  volume: Volume2,
  bell: Bell,
  'bell-ring': BellRing,
  send: Send,
  inbox: Inbox,
  // Time & Calendar
  clock: Clock,
  timer: Timer,
  calendar: Calendar,
  'calendar-check': CalendarCheck,
  'calendar-days': CalendarDays,
  hourglass: Hourglass,
  history: History,
  'alarm-clock': AlarmClock,
  // People & Users
  user: User,
  users: Users,
  'user-plus': UserPlus,
  'user-check': UserCheck,
  'user-circle': UserCircle,
  contact: Contact,
  'person-standing': PersonStanding,
  baby: Baby,
  // Business & Commerce
  briefcase: Briefcase,
  building: Building,
  'building-2': Building2,
  store: Store,
  'shopping-cart': ShoppingCart,
  'shopping-bag': ShoppingBag,
  'credit-card': CreditCard,
  wallet: Wallet,
  receipt: Receipt,
  'badge-dollar': BadgeDollarSign,
  dollar: DollarSign,
  banknote: Banknote,
  'piggy-bank': PiggyBank,
  'trending-up': TrendingUp,
  'trending-down': TrendingDown,
  'bar-chart': BarChart,
  'bar-chart-2': BarChart2,
  'pie-chart': PieChart,
  'line-chart': LineChart,
  // Documents & Files
  file: File,
  'file-text': FileText,
  'file-check': FileCheck,
  files: Files,
  folder: Folder,
  'folder-open': FolderOpen,
  clipboard: Clipboard,
  'clipboard-check': ClipboardCheck,
  'clipboard-list': ClipboardList,
  'book-open': BookOpen,
  book: Book,
  notebook: Notebook,
  // Tools & Settings
  settings: Settings,
  wrench: Wrench,
  hammer: Hammer,
  cog: Cog,
  sliders: SlidersHorizontal,
  palette: Palette,
  paintbrush: Paintbrush,
  scissors: Scissors,
  // Technology
  laptop: Laptop,
  monitor: Monitor,
  smartphone: Smartphone,
  tablet: Tablet,
  watch: Watch,
  wifi: Wifi,
  bluetooth: Bluetooth,
  signal: Signal,
  database: Database,
  server: Server,
  cloud: Cloud,
  'cloud-download': CloudDownload,
  'cloud-upload': CloudUpload,
  download: Download,
  upload: Upload,
  link: Link,
  'qr-code': QrCode,
  // Media & Entertainment
  play: Play,
  pause: Pause,
  music: Music,
  headphones: Headphones,
  camera: Camera,
  image: Image,
  film: Film,
  tv: Tv,
  radio: Radio,
  gamepad: Gamepad2,
  // Location & Travel
  'map-pin': MapPin,
  map: Map,
  navigation: Navigation,
  compass: Compass,
  globe: Globe,
  plane: Plane,
  car: Car,
  bus: Bus,
  train: Train,
  ship: Ship,
  bike: Bike,
  // Nature & Weather
  leaf: Leaf,
  tree: TreePine,
  flower: Flower2,
  mountain: Mountain,
  waves: Waves,
  droplet: Droplet,
  snowflake: Snowflake,
  rain: CloudRain,
  wind: Wind,
  sunrise: Sunrise,
  // Food & Drink
  coffee: Coffee,
  utensils: UtensilsCrossed,
  pizza: Pizza,
  apple: Apple,
  cake: Cake,
  wine: Wine,
  beer: Beer,
  // Health & Medical
  'heart-pulse': HeartPulse,
  stethoscope: Stethoscope,
  pill: Pill,
  syringe: Syringe,
  thermometer: Thermometer,
  activity: Activity,
  accessibility: Accessibility,
  brain: Brain,
  // Home & Lifestyle
  home: Home,
  bed: Bed,
  bath: Bath,
  sofa: Sofa,
  lamp: Lamp,
  'tv-2': Tv2,
  refrigerator: Refrigerator,
  'washing-machine': WashingMachine,
  // Education
  'graduation-cap': GraduationCap,
  'book-marked': BookMarked,
  library: Library,
  'pen-tool': PenTool,
  pencil: Pencil,
  eraser: Eraser,
  ruler: Ruler,
  calculator: Calculator,
  // Sports & Fitness
  dumbbell: Dumbbell,
  target: Target,
  flag: Flag,
  stopwatch: Stopwatch,
  footprints: Footprints,
  // Misc
  gift: Gift,
  package: Package,
  box: Box,
  archive: Archive,
  trash: Trash2,
  refresh: RefreshCw,
  rotate: RotateCcw,
  maximize: Maximize,
  minimize: Minimize,
  plus: Plus,
  minus: Minus,
  percent: Percent,
  hash: Hash,
  at: AtSign,
  asterisk: Asterisk,
  command: Command,
  terminal: Terminal,
  code: Code,
  braces: Braces,
  'git-branch': GitBranch,
  rocket: Rocket,
  anchor: Anchor,
  puzzle: Puzzle,
  layers: Layers,
  layout: Layout,
  grid: Grid,
  list: List,
  menu: Menu,
  'more-horizontal': MoreHorizontal,
  'more-vertical': MoreVertical,
  grip: Grip,
};

// Organized options for the select dropdown
const ICON_OPTIONS = [
  // Status & Feedback
  { label: '── Status & Feedback ──', value: '_status', disabled: true },
  { label: '✓ Checkmark', value: 'check' },
  { label: '✓ Check Circle', value: 'check-circle' },
  { label: '✓ Check Circle 2', value: 'check-circle-2' },
  { label: '✓ Check Square', value: 'check-square' },
  { label: '✗ X Mark', value: 'x' },
  { label: '✗ X Circle', value: 'x-circle' },
  { label: '⚠ Alert Circle', value: 'alert-circle' },
  { label: '⚠ Alert Triangle', value: 'alert-triangle' },
  { label: 'ℹ Info', value: 'info' },
  { label: '? Help Circle', value: 'help-circle' },
  { label: '👍 Thumbs Up', value: 'thumbs-up' },
  { label: '👎 Thumbs Down', value: 'thumbs-down' },

  // Stars & Awards
  { label: '── Stars & Awards ──', value: '_stars', disabled: true },
  { label: '⭐ Star', value: 'star' },
  { label: '✨ Sparkles', value: 'sparkles' },
  { label: '🏆 Award', value: 'award' },
  { label: '🏆 Trophy', value: 'trophy' },
  { label: '🎖 Medal', value: 'medal' },
  { label: '👑 Crown', value: 'crown' },

  // Arrows & Navigation
  { label: '── Arrows & Navigation ──', value: '_arrows', disabled: true },
  { label: '→ Arrow Right', value: 'arrow-right' },
  { label: '← Arrow Left', value: 'arrow-left' },
  { label: '↑ Arrow Up', value: 'arrow-up' },
  { label: '↓ Arrow Down', value: 'arrow-down' },
  { label: '› Chevron Right', value: 'chevron-right' },
  { label: '‹ Chevron Left', value: 'chevron-left' },
  { label: '» Chevrons Right', value: 'chevrons-right' },
  { label: '↗ External Link', value: 'external-link' },

  // Hearts & Emotions
  { label: '── Hearts & Emotions ──', value: '_hearts', disabled: true },
  { label: '❤ Heart', value: 'heart' },
  { label: '🤝 Heart Handshake', value: 'heart-handshake' },
  { label: '😊 Smile', value: 'smile' },
  { label: '😄 Laugh', value: 'laugh' },
  { label: '😐 Meh', value: 'meh' },
  { label: '☹ Frown', value: 'frown' },

  // Security & Protection
  { label: '── Security & Protection ──', value: '_security', disabled: true },
  { label: '🛡 Shield', value: 'shield' },
  { label: '🛡✓ Shield Check', value: 'shield-check' },
  { label: '🔒 Lock', value: 'lock' },
  { label: '🔓 Unlock', value: 'unlock' },
  { label: '🔑 Key', value: 'key' },
  { label: '👆 Fingerprint', value: 'fingerprint' },
  { label: '👁 Eye', value: 'eye' },
  { label: '👁‍🗨 Eye Off', value: 'eye-off' },

  // Energy & Power
  { label: '── Energy & Power ──', value: '_energy', disabled: true },
  { label: '⚡ Lightning', value: 'zap' },
  { label: '🔋 Battery', value: 'battery' },
  { label: '🔌 Battery Charging', value: 'battery-charging' },
  { label: '🔥 Flame', value: 'flame' },
  { label: '💡 Lightbulb', value: 'lightbulb' },
  { label: '☀ Sun', value: 'sun' },
  { label: '🌙 Moon', value: 'moon' },

  // Communication
  { label: '── Communication ──', value: '_communication', disabled: true },
  { label: '✉ Mail', value: 'mail' },
  { label: '📬 Mail Open', value: 'mail-open' },
  { label: '💬 Message Circle', value: 'message-circle' },
  { label: '💬 Message Square', value: 'message-square' },
  { label: '📞 Phone', value: 'phone' },
  { label: '📞 Phone Call', value: 'phone-call' },
  { label: '📹 Video', value: 'video' },
  { label: '🎤 Mic', value: 'mic' },
  { label: '🔔 Bell', value: 'bell' },
  { label: '🔔 Bell Ring', value: 'bell-ring' },
  { label: '📤 Send', value: 'send' },
  { label: '📥 Inbox', value: 'inbox' },

  // Time & Calendar
  { label: '── Time & Calendar ──', value: '_time', disabled: true },
  { label: '🕐 Clock', value: 'clock' },
  { label: '⏱ Timer', value: 'timer' },
  { label: '📅 Calendar', value: 'calendar' },
  { label: '📅✓ Calendar Check', value: 'calendar-check' },
  { label: '📅 Calendar Days', value: 'calendar-days' },
  { label: '⏳ Hourglass', value: 'hourglass' },
  { label: '🕓 History', value: 'history' },
  { label: '⏰ Alarm Clock', value: 'alarm-clock' },

  // People & Users
  { label: '── People & Users ──', value: '_people', disabled: true },
  { label: '👤 User', value: 'user' },
  { label: '👥 Users', value: 'users' },
  { label: '👤+ User Plus', value: 'user-plus' },
  { label: '👤✓ User Check', value: 'user-check' },
  { label: '👤 User Circle', value: 'user-circle' },
  { label: '📇 Contact', value: 'contact' },
  { label: '🧍 Person Standing', value: 'person-standing' },
  { label: '👶 Baby', value: 'baby' },

  // Business & Commerce
  { label: '── Business & Commerce ──', value: '_business', disabled: true },
  { label: '💼 Briefcase', value: 'briefcase' },
  { label: '🏢 Building', value: 'building' },
  { label: '🏬 Building 2', value: 'building-2' },
  { label: '🏪 Store', value: 'store' },
  { label: '🛒 Shopping Cart', value: 'shopping-cart' },
  { label: '🛍 Shopping Bag', value: 'shopping-bag' },
  { label: '💳 Credit Card', value: 'credit-card' },
  { label: '👛 Wallet', value: 'wallet' },
  { label: '🧾 Receipt', value: 'receipt' },
  { label: '💲 Dollar', value: 'dollar' },
  { label: '💵 Banknote', value: 'banknote' },
  { label: '🐷 Piggy Bank', value: 'piggy-bank' },
  { label: '📈 Trending Up', value: 'trending-up' },
  { label: '📉 Trending Down', value: 'trending-down' },
  { label: '📊 Bar Chart', value: 'bar-chart' },
  { label: '📊 Pie Chart', value: 'pie-chart' },
  { label: '📈 Line Chart', value: 'line-chart' },

  // Documents & Files
  { label: '── Documents & Files ──', value: '_documents', disabled: true },
  { label: '📄 File', value: 'file' },
  { label: '📝 File Text', value: 'file-text' },
  { label: '📄✓ File Check', value: 'file-check' },
  { label: '📁 Folder', value: 'folder' },
  { label: '📂 Folder Open', value: 'folder-open' },
  { label: '📋 Clipboard', value: 'clipboard' },
  { label: '📋✓ Clipboard Check', value: 'clipboard-check' },
  { label: '📋 Clipboard List', value: 'clipboard-list' },
  { label: '📖 Book Open', value: 'book-open' },
  { label: '📕 Book', value: 'book' },
  { label: '📓 Notebook', value: 'notebook' },

  // Tools & Settings
  { label: '── Tools & Settings ──', value: '_tools', disabled: true },
  { label: '⚙ Settings', value: 'settings' },
  { label: '🔧 Wrench', value: 'wrench' },
  { label: '🔨 Hammer', value: 'hammer' },
  { label: '⚙ Cog', value: 'cog' },
  { label: '🎚 Sliders', value: 'sliders' },
  { label: '🎨 Palette', value: 'palette' },
  { label: '🖌 Paintbrush', value: 'paintbrush' },
  { label: '✂ Scissors', value: 'scissors' },

  // Technology
  { label: '── Technology ──', value: '_technology', disabled: true },
  { label: '💻 Laptop', value: 'laptop' },
  { label: '🖥 Monitor', value: 'monitor' },
  { label: '📱 Smartphone', value: 'smartphone' },
  { label: '📱 Tablet', value: 'tablet' },
  { label: '⌚ Watch', value: 'watch' },
  { label: '📶 WiFi', value: 'wifi' },
  { label: '🔵 Bluetooth', value: 'bluetooth' },
  { label: '📶 Signal', value: 'signal' },
  { label: '🗄 Database', value: 'database' },
  { label: '🖥 Server', value: 'server' },
  { label: '☁ Cloud', value: 'cloud' },
  { label: '☁↓ Cloud Download', value: 'cloud-download' },
  { label: '☁↑ Cloud Upload', value: 'cloud-upload' },
  { label: '⬇ Download', value: 'download' },
  { label: '⬆ Upload', value: 'upload' },
  { label: '🔗 Link', value: 'link' },
  { label: '▣ QR Code', value: 'qr-code' },

  // Media & Entertainment
  { label: '── Media & Entertainment ──', value: '_media', disabled: true },
  { label: '▶ Play', value: 'play' },
  { label: '⏸ Pause', value: 'pause' },
  { label: '🎵 Music', value: 'music' },
  { label: '🎧 Headphones', value: 'headphones' },
  { label: '📷 Camera', value: 'camera' },
  { label: '🖼 Image', value: 'image' },
  { label: '🎬 Film', value: 'film' },
  { label: '📺 TV', value: 'tv' },
  { label: '📻 Radio', value: 'radio' },
  { label: '🎮 Gamepad', value: 'gamepad' },

  // Location & Travel
  { label: '── Location & Travel ──', value: '_location', disabled: true },
  { label: '📍 Map Pin', value: 'map-pin' },
  { label: '🗺 Map', value: 'map' },
  { label: '🧭 Navigation', value: 'navigation' },
  { label: '🧭 Compass', value: 'compass' },
  { label: '🌍 Globe', value: 'globe' },
  { label: '✈ Plane', value: 'plane' },
  { label: '🚗 Car', value: 'car' },
  { label: '🚌 Bus', value: 'bus' },
  { label: '🚆 Train', value: 'train' },
  { label: '🚢 Ship', value: 'ship' },
  { label: '🚲 Bike', value: 'bike' },

  // Nature & Weather
  { label: '── Nature & Weather ──', value: '_nature', disabled: true },
  { label: '🍃 Leaf', value: 'leaf' },
  { label: '🌲 Tree', value: 'tree' },
  { label: '🌸 Flower', value: 'flower' },
  { label: '⛰ Mountain', value: 'mountain' },
  { label: '🌊 Waves', value: 'waves' },
  { label: '💧 Droplet', value: 'droplet' },
  { label: '❄ Snowflake', value: 'snowflake' },
  { label: '🌧 Rain', value: 'rain' },
  { label: '💨 Wind', value: 'wind' },
  { label: '🌅 Sunrise', value: 'sunrise' },

  // Food & Drink
  { label: '── Food & Drink ──', value: '_food', disabled: true },
  { label: '☕ Coffee', value: 'coffee' },
  { label: '🍴 Utensils', value: 'utensils' },
  { label: '🍕 Pizza', value: 'pizza' },
  { label: '🍎 Apple', value: 'apple' },
  { label: '🎂 Cake', value: 'cake' },
  { label: '🍷 Wine', value: 'wine' },
  { label: '🍺 Beer', value: 'beer' },

  // Health & Medical
  { label: '── Health & Medical ──', value: '_health', disabled: true },
  { label: '💓 Heart Pulse', value: 'heart-pulse' },
  { label: '🩺 Stethoscope', value: 'stethoscope' },
  { label: '💊 Pill', value: 'pill' },
  { label: '💉 Syringe', value: 'syringe' },
  { label: '🌡 Thermometer', value: 'thermometer' },
  { label: '📊 Activity', value: 'activity' },
  { label: '♿ Accessibility', value: 'accessibility' },
  { label: '🧠 Brain', value: 'brain' },

  // Home & Lifestyle
  { label: '── Home & Lifestyle ──', value: '_home', disabled: true },
  { label: '🏠 Home', value: 'home' },
  { label: '🛏 Bed', value: 'bed' },
  { label: '🛁 Bath', value: 'bath' },
  { label: '🛋 Sofa', value: 'sofa' },
  { label: '💡 Lamp', value: 'lamp' },
  { label: '📺 TV 2', value: 'tv-2' },
  { label: '🧊 Refrigerator', value: 'refrigerator' },
  { label: '🧺 Washing Machine', value: 'washing-machine' },

  // Education
  { label: '── Education ──', value: '_education', disabled: true },
  { label: '🎓 Graduation Cap', value: 'graduation-cap' },
  { label: '📑 Book Marked', value: 'book-marked' },
  { label: '📚 Library', value: 'library' },
  { label: '✒ Pen Tool', value: 'pen-tool' },
  { label: '✏ Pencil', value: 'pencil' },
  { label: '📏 Ruler', value: 'ruler' },
  { label: '🔢 Calculator', value: 'calculator' },

  // Sports & Fitness
  { label: '── Sports & Fitness ──', value: '_sports', disabled: true },
  { label: '🏋 Dumbbell', value: 'dumbbell' },
  { label: '🎯 Target', value: 'target' },
  { label: '🚩 Flag', value: 'flag' },
  { label: '⏱ Stopwatch', value: 'stopwatch' },
  { label: '👣 Footprints', value: 'footprints' },

  // Misc
  { label: '── Miscellaneous ──', value: '_misc', disabled: true },
  { label: '🎁 Gift', value: 'gift' },
  { label: '📦 Package', value: 'package' },
  { label: '📦 Box', value: 'box' },
  { label: '🗃 Archive', value: 'archive' },
  { label: '🗑 Trash', value: 'trash' },
  { label: '🔄 Refresh', value: 'refresh' },
  { label: '↺ Rotate', value: 'rotate' },
  { label: '⊕ Plus', value: 'plus' },
  { label: '⊖ Minus', value: 'minus' },
  { label: '% Percent', value: 'percent' },
  { label: '# Hash', value: 'hash' },
  { label: '@ At Sign', value: 'at' },
  { label: '🚀 Rocket', value: 'rocket' },
  { label: '⚓ Anchor', value: 'anchor' },
  { label: '🧩 Puzzle', value: 'puzzle' },
  { label: '📚 Layers', value: 'layers' },
  { label: '🖼 Layout', value: 'layout' },
  { label: '⊞ Grid', value: 'grid' },
  { label: '☰ List', value: 'list' },
  { label: '☰ Menu', value: 'menu' },
  { label: '⌨ Terminal', value: 'terminal' },
  { label: '</> Code', value: 'code' },
  { label: '{ } Braces', value: 'braces' },
  { label: '🔀 Git Branch', value: 'git-branch' },
];

const COLUMN_CLASSES = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 sm:grid-cols-2',
  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
};

export const IconList: ComponentConfig<IconListProps> = {
  label: 'Icon List',
  fields: {
    items: {
      type: 'array',
      arrayFields: {
        icon: {
          type: 'select',
          options: ICON_OPTIONS.filter(opt => !opt.disabled),
        },
        title: { type: 'text' },
        description: { type: 'textarea' },
      },
      getItemSummary: (item) => item.title || 'Feature',
    },
    columns: {
      type: 'select',
      options: [
        { label: '1 Column', value: 1 },
        { label: '2 Columns', value: 2 },
        { label: '3 Columns', value: 3 },
        { label: '4 Columns', value: 4 },
      ],
    },
  },
  defaultProps: {
    items: [
      { icon: 'check', title: 'Feature 1', description: 'Description of feature 1' },
      { icon: 'check', title: 'Feature 2', description: 'Description of feature 2' },
      { icon: 'check', title: 'Feature 3', description: 'Description of feature 3' },
    ],
    columns: 3,
  },
  render: ({ items, columns }) => {
    const columnClass = COLUMN_CLASSES[columns] || COLUMN_CLASSES[3];

    return (
      <div className={`grid ${columnClass} gap-8`}>
        {items.map((item, index) => {
          const IconComponent = ICON_MAP[item.icon] || Check;
          return (
            <div key={index} className="flex flex-col items-center text-center sm:items-start sm:text-left">
              <div className="flex-shrink-0 w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center mb-4">
                <IconComponent className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
              </div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                {item.title}
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                {item.description}
              </p>
            </div>
          );
        })}
      </div>
    );
  },
};

export default IconList;
