import { Component } from 'vue'
import {
  LayoutDashboard,
  ShoppingBag,
  ShoppingCart,
  User,
  Users,
  TrendingUp,
  FileText,
  BarChart3,
  Settings,
  Package,
  FolderTree,
  ListChecks,
  Tag,
  Star,
  Receipt,
  Truck,
  CreditCard,
  Megaphone,
  Sparkles,
  Ticket,
  Mail,
  Globe,
  BookOpen,
  LayoutGrid,
  Newspaper,
  Image,
  Server,
  Shield,
  Wrench,
  Store,
  Flag,
  Smartphone,
  Percent,
  List,
  Clock,
  Menu,
  Box,
  Zap,
  Database,
  LineChart,
  FileText as DocumentText,
  RefreshCw,
} from 'lucide-vue-next'

export interface IconMap {
  [key: string]: Component
}

export function useMenuIcons() {
  const iconMap: IconMap = {
    'layout-dashboard': LayoutDashboard,
    'shopping-bag': ShoppingBag,
    'shopping-cart': ShoppingCart,
    'user': User,
    'users': Users,
    'trending-up': TrendingUp,
    'file-text': FileText,
    'bar-chart-3': BarChart3,
    'settings': Settings,
    'package': Package,
    'folder-tree': FolderTree,
    'list-checks': ListChecks,
    'tag': Tag,
    'star': Star,
    'receipt': Receipt,
    'truck': Truck,
    'credit-card': CreditCard,
    'megaphone': Megaphone,
    'sparkles': Sparkles,
    'ticket': Ticket,
    'mail': Mail,
    'globe': Globe,
    'book-open': BookOpen,
    'layout-grid': LayoutGrid,
    'newspaper': Newspaper,
    'image': Image,
    'server': Server,
    'shield': Shield,
    'wrench': Wrench,
    'shop': Store,
    'store': Store,
    'flag': Flag,
    'devices': Smartphone,
    'percent': Percent,
    'list': List,
    'clock': Clock,
    'menu': Menu,
    'box': Box,
    'zap': Zap,
    'database': Database,
    'chart-line': LineChart,
    'document-text': DocumentText,
    'refresh-cw': RefreshCw,
  }

  const getIcon = (iconName: string): Component | null => {
    return iconMap[iconName] || null
  }

  return {
    iconMap,
    getIcon,
  }
}
