import type { SVGProps } from "react";

export type PortalIconName = "chat" | "arrow" | "pin" | "check" | "list" | "help" | "cable" | "breaker" | "pipe" | "light" | "panel" | "tool" | "building" | "sprout" | "factory" | "drafting";

/** Small, consistent line icons; decorative where adjacent text provides the name. */
export function PortalIcon({ name, ...props }: SVGProps<SVGSVGElement> & { name: PortalIconName }) {
  const paths: Record<PortalIconName, React.ReactNode> = {
    building: <><path d="M3 21h18M5 21V3h10v18M15 10h4v11M8 7h1m3 0h0M8 11h1m3 0h0M8 15h1m3 0h0M9 21v-3h3v3" /></>,
    sprout: <><path d="M12 21v-8M4 21h16M12 15C5 15 3 11 3 5c6 0 9 3 9 10Zm0-4c0-6 3-9 9-9 0 6-3 9-9 9Z" /><path d="m7 9 5 6m5-9-5 5" /></>,
    factory: <><path d="M3 21V10l6-4v5l6-4v6h6v8ZM17 13l1-10h2l1 10M6 17h1m4 0h1m4 0h1" /></>,
    drafting: <><path d="M3 3h11v4H7v14H3ZM10 21h11V10ZM17 17v1h1M6 3v2m4-2v2M3 9h2m-2 4h2m-2 4h2" /></>,
    chat: <><path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z" /><path d="M8 10h8M8 14h5" /></>,
    arrow: <path d="M5 12h14m-6-6 6 6-6 6" />,
    pin: <><path d="M20 10c0 6-8 11-8 11S4 16 4 10a8 8 0 1 1 16 0Z" /><circle cx="12" cy="10" r="2.5" /></>,
    check: <path d="m5 12 4 4L19 6" />,
    list: <><rect x="5" y="3" width="14" height="18" rx="2" /><path d="M9 8h6M9 12h6M9 16h3" /></>,
    help: <><circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4m0 3v.2" /></>,
    cable: <><path d="M7 3v9a5 5 0 0 0 10 0V9a2 2 0 0 0-4 0v4a1 1 0 0 1-2 0V3M5 3h8M17 17v4m-3 0h6" /></>,
    breaker: <><rect x="5" y="4" width="14" height="16" rx="1" /><path d="M9 1v3m6-3v3M9 20v3m6-3v3M5 9h14M5 16h14" /><path d="M10 11h4v3h-4z" /></>,
    pipe: <><path d="M3 20V7a4 4 0 0 1 4-4h14v6H10a1 1 0 0 0-1 1v10zM15 3v6M3 14h6M18 3v6" /></>,
    light: <><path d="M9 18h6m-5 3h4M8 14a6 6 0 1 1 8 0c-1 .8-1 2-1 2H9s0-1.2-1-2Z" /><path d="M12 1V0M2 7H0m24 0h-2" /></>,
    panel: <><rect x="4" y="2" width="16" height="20" rx="1" /><path d="M7 6h10v5H7zM8 15h1m3 0h1m3 0h1M8 18h1m3 0h1m3 0h1" /></>,
    tool: <><path d="M14 3a5 5 0 0 0-6 6L2 15a3 3 0 0 0 4 4l6-6a5 5 0 0 0 6-6l-4 3-3-3 3-4Z" /><path d="m15 15 6 6m-4-8 5 5" /></>,
  };
  return <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false" {...props}>{paths[name]}</svg>;
}