import type { HTMLAttributes } from "react";
import {
  Bell,
  BriefcaseBusiness,
  CalendarCheck,
  Circle,
  ClipboardCheck,
  CloudUpload,
  FileCheck2,
  FileText,
  Home,
  IdCard,
  Network,
  PackageSearch,
  ReceiptText,
  Settings,
  UserCog,
  UserRound,
  Users,
  type LucideIcon,
} from "lucide-react";
import { cn } from "../../lib/utils";

const MOBILE_ICON_MAP: Record<string, LucideIcon> = {
  account_tree: Network,
  badge: IdCard,
  cloud_upload: CloudUpload,
  event_available: CalendarCheck,
  fact_check: ClipboardCheck,
  group: Users,
  home: Home,
  inventory_2: PackageSearch,
  manage_accounts: UserCog,
  notifications: Bell,
  person: UserRound,
  picture_as_pdf: FileText,
  receipt_long: ReceiptText,
  request_quote: FileCheck2,
  settings: Settings,
  workspaces: BriefcaseBusiness,
};

type MobileIconProps = HTMLAttributes<HTMLSpanElement> & {
  iconClassName?: string;
  name: string;
};

export function MobileIcon({ className, iconClassName, name, ...props }: MobileIconProps) {
  const Icon = MOBILE_ICON_MAP[name] ?? Circle;

  return (
    <span
      aria-hidden="true"
      className={cn("inline-flex shrink-0 items-center justify-center leading-none", className)}
      {...props}
    >
      <Icon className={cn("size-5", iconClassName)} strokeWidth={2.1} />
    </span>
  );
}