// Lucide-inspired line icons, 20x20 base, 1.6 stroke
const Icon = ({ name, size = 18, className = "", style = {} }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: 1.6,
    strokeLinecap: "round", strokeLinejoin: "round",
    className, style,
  };
  switch (name) {
    case "home": return (<svg {...props}><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-9.5Z"/></svg>);
    case "users": return (<svg {...props}><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.5-3.5 3.3-5.5 6.5-5.5s6 2 6.5 5.5"/><circle cx="17" cy="7" r="2.5"/><path d="M16 14c2.5 0 4.5 1.5 5 4"/></svg>);
    case "order": return (<svg {...props}><path d="M4 6h16M5 6l1.2 12.1A2 2 0 0 0 8.2 20h7.6a2 2 0 0 0 2-1.9L19 6"/><path d="M9 10v4M15 10v4"/></svg>);
    case "palette": return (<svg {...props}><path d="M12 3a9 9 0 1 0 0 18 2.5 2.5 0 0 0 2-4c0-1.4 1.1-2.5 2.5-2.5H19a3 3 0 0 0 3-3A9 9 0 0 0 12 3Z"/><circle cx="7.5" cy="10.5" r="1"/><circle cx="11" cy="7" r="1"/><circle cx="15.5" cy="7.5" r="1"/><circle cx="17.5" cy="11.5" r="1"/></svg>);
    case "user": return (<svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21c1-4.5 4.5-7 8-7s7 2.5 8 7"/></svg>);
    case "user-plus": return (<svg {...props}><circle cx="10" cy="8" r="4"/><path d="M2 21c1-4 4-6.5 8-6.5s3.5.5 5 1.5"/><path d="M19 14v6M16 17h6"/></svg>);
    case "clock": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg>);
    case "file": return (<svg {...props}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M14 3v5h5"/></svg>);
    case "coin": return (<svg {...props}><ellipse cx="12" cy="7" rx="8" ry="3"/><path d="M4 7v5c0 1.7 3.6 3 8 3s8-1.3 8-3V7"/><path d="M4 12v5c0 1.7 3.6 3 8 3s8-1.3 8-3v-5"/></svg>);
    case "shield": return (<svg {...props}><path d="M12 3 4 6v6c0 4.5 3.3 8.3 8 9 4.7-.7 8-4.5 8-9V6l-8-3Z"/><path d="m9 12 2 2 4-4"/></svg>);
    case "scroll": return (<svg {...props}><path d="M4 4h11a2 2 0 0 1 2 2v12a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2V4Z"/><path d="M8 8h6M8 12h6M8 16h4"/></svg>);
    case "settings": return (<svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>);
    case "search": return (<svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>);
    case "bell": return (<svg {...props}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a2 2 0 0 0 3.4 0"/></svg>);
    case "chevron-down": return (<svg {...props}><path d="m6 9 6 6 6-6"/></svg>);
    case "chevron-right": return (<svg {...props}><path d="m9 6 6 6-6 6"/></svg>);
    case "chevron-left": return (<svg {...props}><path d="m15 6-6 6 6 6"/></svg>);
    case "plus": return (<svg {...props}><path d="M12 5v14M5 12h14"/></svg>);
    case "minus": return (<svg {...props}><path d="M5 12h14"/></svg>);
    case "x": return (<svg {...props}><path d="M18 6 6 18M6 6l12 12"/></svg>);
    case "check": return (<svg {...props}><path d="m5 12 5 5L20 7"/></svg>);
    case "eye": return (<svg {...props}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>);
    case "eye-off": return (<svg {...props}><path d="M2 2 22 22"/><path d="M6.7 6.7C4 8.5 2 12 2 12s3.5 7 10 7a10 10 0 0 0 5.3-1.5"/><path d="M9.9 5.2A10 10 0 0 1 12 5c6.5 0 10 7 10 7a18 18 0 0 1-3.2 4"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg>);
    case "filter": return (<svg {...props}><path d="M3 5h18l-7 9v5l-4 2v-7L3 5Z"/></svg>);
    case "download": return (<svg {...props}><path d="M12 3v12M7 10l5 5 5-5M4 21h16"/></svg>);
    case "more": return (<svg {...props}><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>);
    case "logout": return (<svg {...props}><path d="M15 5V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-1"/><path d="M10 12h11M18 9l3 3-3 3"/></svg>);
    case "lock": return (<svg {...props}><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 1 1 8 0v3"/></svg>);
    case "mail": return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg>);
    case "arrow-up": return (<svg {...props}><path d="M12 19V5M5 12l7-7 7 7"/></svg>);
    case "arrow-down": return (<svg {...props}><path d="M12 5v14M5 12l7 7 7-7"/></svg>);
    case "arrow-right": return (<svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case "arrow-left": return (<svg {...props}><path d="M19 12H5M12 19l-7-7 7-7"/></svg>);
    case "refresh": return (<svg {...props}><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>);
    case "alert": return (<svg {...props}><path d="M12 3 2 20h20L12 3Z"/><path d="M12 10v4M12 18v.01"/></svg>);
    case "info": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v5h1"/></svg>);
    case "trash": return (<svg {...props}><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M5 6l1 14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-14"/><path d="M10 11v6M14 11v6"/></svg>);
    case "edit": return (<svg {...props}><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5Z"/></svg>);
    case "copy": return (<svg {...props}><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>);
    case "external": return (<svg {...props}><path d="M14 3h7v7"/><path d="M10 14 21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>);
    case "calendar": return (<svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>);
    case "chart": return (<svg {...props}><path d="M3 20h18"/><path d="M6 16v-4M10 16V8M14 16v-6M18 16V4"/></svg>);
    case "ban": return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="m5.6 5.6 12.8 12.8"/></svg>);
    case "star": return (<svg {...props}><path d="m12 3 2.8 5.8 6.2.9-4.5 4.4 1 6.3L12 17.5 6.5 20.4l1-6.3L3 9.7l6.2-.9L12 3Z"/></svg>);
    case "sparkle": return (<svg {...props}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/></svg>);
    case "flag": return (<svg {...props}><path d="M4 21V4h13l-2 4 2 4H4"/></svg>);
    case "key": return (<svg {...props}><circle cx="8" cy="14" r="4"/><path d="m11 11 9-9M16 6l3 3M13.5 8.5l3 3"/></svg>);
    case "clipboard": return (<svg {...props}><rect x="6" y="4" width="12" height="18" rx="2"/><path d="M9 4V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1"/></svg>);
    case "menu": return (<svg {...props}><path d="M4 6h16M4 12h16M4 18h16"/></svg>);
    case "message": return (<svg {...props}><path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>);
    case "sort":  return (<svg {...props}><path d="M3 6h18M6 12h12M10 18h4"/></svg>);
    case "image": return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.5" cy="10.5" r="1.5"/><path d="m21 15-5-5L5 19"/></svg>);
    case "paperclip": return (<svg {...props}><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>);
    default: return (<svg {...props}><circle cx="12" cy="12" r="2"/></svg>);
  }
};

window.Icon = Icon;