import type { SVGProps } from "react";

export function Icon({ name, ...props }: SVGProps<SVGSVGElement> & { name: string }) {
  const paths: Record<string, React.ReactNode> = {
    home: <><path d="m3 11 9-8 9 8"/><path d="M5 10v10h14V10M9 20v-6h6v6"/></>,
    building: <><path d="M4 21V5l8-3v19M12 8h8v13M7 8h2m-2 4h2m-2 4h2m8-4h1m-1 4h1M2 21h20"/></>,
    panel: <><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M9 6h6M9 10h2m2 0h2M9 14h6M12 18v.01"/></>,
    plus: <><path d="M12 5v14M5 12h14"/><circle cx="12" cy="12" r="9"/></>,
    bolt: <path d="m13 2-8 12h7l-1 8 8-12h-7z"/>,
    ground: <><path d="M12 2v12M6 14h12M8 18h8M10 22h4"/></>,
    cable: <><path d="M6 3v6a6 6 0 0 0 12 0V3M4 3h4m8 0h4M12 15v6"/></>,
    check: <><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></>,
    arrow: <path d="m9 18 6-6-6-6"/>,
    phone: <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c1 .4 1.9.6 2.9.7a2 2 0 0 1 1.7 2z"/>,
    whatsapp: <><path d="M21 11.5a8.4 8.4 0 0 1-9 8.5 9.3 9.3 0 0 1-3.8-.9L3 21l1.7-5A8.5 8.5 0 1 1 21 11.5z"/><path d="M8.5 8.5c.6 3 2 4.5 5 6 .8.4 1.7-.8 2-1.2"/></>,
    menu: <><path d="M4 7h16M4 12h16M4 17h16"/></>,
    close: <><path d="m6 6 12 12M18 6 6 18"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></>,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></>,
    upload: <><path d="M12 16V4m0 0L7 9m5-5 5 5"/><path d="M4 15v5h16v-5"/></>,
  };
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...props}>{paths[name] ?? paths.bolt}</svg>;
}