import type { ElementType } from "react";

// MUI icons used across the app; extend as needed
import HomeIcon from "@mui/icons-material/Home";
import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import SearchIcon from "@mui/icons-material/Search";
import VerifiedUserIcon from "@mui/icons-material/VerifiedUser";
import PeopleIcon from "@mui/icons-material/People";
import GavelIcon from "@mui/icons-material/Gavel";
import HubIcon from "@mui/icons-material/Hub";
import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
import InsightsIcon from "@mui/icons-material/Insights";
import ListAltIcon from "@mui/icons-material/ListAlt";
import SettingsIcon from "@mui/icons-material/Settings";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import HistoryIcon from "@mui/icons-material/History";
import FactCheckIcon from "@mui/icons-material/FactCheck";
import WidgetsIcon from "@mui/icons-material/Widgets"; // fallback

// Map string keys from backend to actual Icon components
const iconRegistry: Record<string, ElementType> = {
  HomeIcon,
  AccountBalanceWalletIcon,
  CheckCircleIcon,
  SearchIcon,
  VerifiedUserIcon,
  PeopleIcon,
  GavelIcon,
  HubIcon,
  AdminPanelSettingsIcon,
  InsightsIcon,
  ListAltIcon,
  SettingsIcon,
  ArrowDownwardIcon,
  ArrowUpwardIcon,
  HistoryIcon,
  FactCheckIcon,
};

export function resolveIcon(
  icon?: ElementType | string
): ElementType | undefined {
  if (!icon) return undefined;
  if (typeof icon === "string") {
    return iconRegistry[icon] || WidgetsIcon; // fallback to a generic icon
  }
  return icon;
}