"use client";

import {
  ShoppingCart,
  Utensils,
  Croissant,
  Fuel,
  Train,
  Car,
  SquareParking,
  Bike,
  Plane,
  Home,
  Zap,
  Droplet,
  Hammer,
  Sofa,
  Pill,
  Stethoscope,
  Hospital,
  Glasses,
  Dumbbell,
  Sparkles,
  Tv,
  Music,
  Film,
  Gamepad,
  Book,
  Ticket,
  Shirt,
  Smartphone,
  Package,
  Wifi,
  Repeat,
  Landmark,
  Shield,
  HeartPulse,
  Receipt,
  PiggyBank,
  Banknote,
  Wallet,
  HandCoins,
  Undo,
  Coins,
  Bed,
  Luggage,
  GraduationCap,
  Baby,
  PawPrint,
  Wrench,
  HeartHandshake,
  Gift,
  Cigarette,
  ArrowRightLeft,
  HelpCircle,
  Tag,
  Folder,
  Key,
  Refrigerator,
  type LucideIcon,
} from "lucide-react";

// Map icon names to Lucide components
const iconMap: Record<string, LucideIcon> = {
  "shopping-cart": ShoppingCart,
  utensils: Utensils,
  croissant: Croissant,
  fuel: Fuel,
  train: Train,
  car: Car,
  "car-taxi": Car, // Using Car as fallback for car-taxi
  "car-key": Key, // Using Key as fallback
  parking: SquareParking,
  bike: Bike,
  plane: Plane,
  home: Home,
  zap: Zap,
  droplet: Droplet,
  hammer: Hammer,
  sofa: Sofa,
  refrigerator: Refrigerator,
  pill: Pill,
  stethoscope: Stethoscope,
  hospital: Hospital,
  glasses: Glasses,
  dumbbell: Dumbbell,
  sparkles: Sparkles,
  tv: Tv,
  music: Music,
  film: Film,
  gamepad: Gamepad,
  book: Book,
  ticket: Ticket,
  shirt: Shirt,
  smartphone: Smartphone,
  package: Package,
  wifi: Wifi,
  repeat: Repeat,
  landmark: Landmark,
  shield: Shield,
  "heart-pulse": HeartPulse,
  receipt: Receipt,
  "piggy-bank": PiggyBank,
  banknote: Banknote,
  wallet: Wallet,
  "hand-coins": HandCoins,
  undo: Undo,
  coins: Coins,
  bed: Bed,
  luggage: Luggage,
  "graduation-cap": GraduationCap,
  baby: Baby,
  "paw-print": PawPrint,
  wrench: Wrench,
  "heart-handshake": HeartHandshake,
  gift: Gift,
  cigarette: Cigarette,
  "arrow-right-left": ArrowRightLeft,
  "help-circle": HelpCircle,
  tag: Tag,
  folder: Folder,
};

// Get all available icon names
export const availableIcons = Object.keys(iconMap);

// Get the icon component by name
export function getIconComponent(iconName: string): LucideIcon {
  return iconMap[iconName] || Tag;
}

interface CategoryIconProps {
  icon: string;
  color?: string;
  className?: string;
  size?: number;
}

export function CategoryIcon({
  icon,
  color,
  className,
  size = 20,
}: CategoryIconProps) {
  const IconComponent = getIconComponent(icon);
  return <IconComponent className={className} style={{ color }} size={size} />;
}