import {
  BookOpen,
  Calendar,
  Film,
  Folder,
  Gift,
  Globe2,
  GraduationCap,
  Hash,
  Image as ImageIcon,
  Megaphone,
  MessageCircle,
  Newspaper,
  Palette,
  Play,
  type LucideIcon,
} from "lucide-react";
import { categorySvgUrlForSlug } from "../lib/categorySvgSlug";

const map: Record<string, LucideIcon> = {
  folder: Folder,
  calendar: Calendar,
  megaphone: Megaphone,
  graduation: GraduationCap,
  globe: Globe2,
  image: ImageIcon,
  chat: MessageCircle,
  film: Film,
  gift: Gift,
  book: BookOpen,
  palette: Palette,
  newspaper: Newspaper,
  play: Play,
  hash: Hash,
};

export function CategoryIcon({
  iconKey,
  categorySlug,
  className,
}: {
  iconKey: string;
  /** When set, prefer branded SVG from `public/assets/ark-library/media/svg/`. */
  categorySlug?: string;
  className?: string;
}) {
  const svgUrl = categorySlug ? categorySvgUrlForSlug(categorySlug) : null;
  if (svgUrl) {
    return (
      <img
        src={svgUrl}
        alt=""
        className={[className, "object-contain pointer-events-none select-none"]
          .filter(Boolean)
          .join(" ")}
        loading="lazy"
        decoding="async"
      />
    );
  }
  const Icon = map[iconKey] || Folder;
  return <Icon className={className} />;
}