"use client";

import {
  CheckCircle,
  Sparkles,
  AlertTriangle,
  CreditCard,
  TrendingUp,
  Lightbulb,
  UserPlus,
  FileBarChart,
  MousePointer,
  Clock,
  ArrowUp,
  MessageSquare,
  Zap,
} from "lucide-react";

const ICON_MAP: Record<string, React.ComponentType<{ className?: string; strokeWidth?: number }>> = {
  CheckCircle,
  Sparkles,
  AlertTriangle,
  CreditCard,
  TrendingUp,
  Lightbulb,
  UserPlus,
  FileBarChart,
  MousePointer,
  Clock,
  ArrowUp,
  MessageSquare,
  Zap,
};

export function NotifIcon({ icon, color, size = "md" }: { icon: string; color: string; size?: "sm" | "md" }) {
  const Icon = ICON_MAP[icon] ?? AlertTriangle;
  const sizeClass = size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
  const wrapClass = size === "sm" ? "w-7 h-7" : "w-8 h-8";
  return (
    <div className={`${wrapClass} rounded-full bg-bg-card border border-border flex items-center justify-center shrink-0`}>
      <Icon className={`${sizeClass} ${color}`} strokeWidth={1.75} />
    </div>
  );
}