// Shared SVG icon helpers. The paths follow the Lucide visual language so
// controls stay consistent without adding a bundler to this static app.

const ICON_PATHS = {
  "alert-triangle": [
    <path key="a" d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/>,
    <path key="b" d="M12 9v4"/>,
    <path key="c" d="M12 17h.01"/>,
  ],
  "arrow-left": [
    <path key="a" d="M19 12H5"/>,
    <path key="b" d="m12 19-7-7 7-7"/>,
  ],
  "arrow-right": [
    <path key="a" d="M5 12h14"/>,
    <path key="b" d="m12 5 7 7-7 7"/>,
  ],
  "briefcase-business": [
    <path key="a" d="M10 6V5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1"/>,
    <path key="b" d="M3 7h18v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>,
    <path key="c" d="M3 13h18"/>,
    <path key="d" d="M8 13v2"/>,
    <path key="e" d="M16 13v2"/>,
  ],
  check: [
    <path key="a" d="m20 6-11 11-5-5"/>,
  ],
  "chevron-left": [
    <path key="a" d="m15 18-6-6 6-6"/>,
  ],
  "chevron-right": [
    <path key="a" d="m9 18 6-6-6-6"/>,
  ],
  circle: [
    <circle key="a" cx="12" cy="12" r="9"/>,
  ],
  coins: [
    <circle key="a" cx="8" cy="8" r="5"/>,
    <path key="b" d="M13 8c3.3 0 6 2 6 4.5S16.3 17 13 17c-1.2 0-2.4-.3-3.3-.8"/>,
    <path key="c" d="M13 13c3.3 0 6 2 6 4.5S16.3 22 13 22c-2.7 0-5-1.3-5.7-3.2"/>,
  ],
  "eye": [
    <path key="a" d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/>,
    <circle key="b" cx="12" cy="12" r="3"/>,
  ],
  "eye-off": [
    <path key="a" d="m3 3 18 18"/>,
    <path key="b" d="M10.6 10.6a3 3 0 0 0 4.2 4.2"/>,
    <path key="c" d="M9.9 4.2A10.6 10.6 0 0 1 12 4c6.5 0 10 8 10 8a18.4 18.4 0 0 1-3.1 4.3"/>,
    <path key="d" d="M6.6 6.6C3.5 8.7 2 12 2 12s3.5 8 10 8a10.9 10.9 0 0 0 4.4-.9"/>,
  ],
  "file-text": [
    <path key="a" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/>,
    <path key="b" d="M14 2v6h6"/>,
    <path key="c" d="M16 13H8"/>,
    <path key="d" d="M16 17H8"/>,
    <path key="e" d="M10 9H8"/>,
  ],
  home: [
    <path key="a" d="m3 11 9-8 9 8"/>,
    <path key="b" d="M5 10v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10"/>,
    <path key="c" d="M9 21v-7h6v7"/>,
  ],
  "key-round": [
    <circle key="a" cx="8" cy="15" r="4"/>,
    <path key="b" d="m11 12 8-8"/>,
    <path key="c" d="m15 8 3 3"/>,
    <path key="d" d="m17 6 3 3"/>,
  ],
  "life-buoy": [
    <circle key="a" cx="12" cy="12" r="10"/>,
    <circle key="b" cx="12" cy="12" r="4"/>,
    <path key="c" d="m4.9 4.9 4.3 4.3"/>,
    <path key="d" d="m14.8 14.8 4.3 4.3"/>,
    <path key="e" d="m19.1 4.9-4.3 4.3"/>,
    <path key="f" d="m9.2 14.8-4.3 4.3"/>,
  ],
  lock: [
    <rect key="a" x="3" y="11" width="18" height="11" rx="2"/>,
    <path key="b" d="M7 11V7a5 5 0 0 1 10 0v4"/>,
  ],
  "log-out": [
    <path key="a" d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>,
    <path key="b" d="m16 17 5-5-5-5"/>,
    <path key="c" d="M21 12H9"/>,
  ],
  "message-square": [
    <path key="a" d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z"/>,
  ],
  paperclip: [
    <path key="a" d="m21.4 11.6-8.5 8.5a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5"/>,
  ],
  plus: [
    <path key="a" d="M5 12h14"/>,
    <path key="b" d="M12 5v14"/>,
  ],
  printer: [
    <path key="a" d="M6 9V2h12v7"/>,
    <path key="b" d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>,
    <path key="c" d="M6 14h12v8H6Z"/>,
    <path key="d" d="M18 13h.01"/>,
  ],
  "rotate-cw": [
    <path key="a" d="M21 12a9 9 0 1 1-2.6-6.4"/>,
    <path key="b" d="M21 3v6h-6"/>,
  ],
  send: [
    <path key="a" d="m22 2-7 20-4-9-9-4Z"/>,
    <path key="b" d="M22 2 11 13"/>,
  ],
  settings: [
    <path key="a" d="M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z"/>,
    <path key="b" d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.6-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.6V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.1a2 2 0 1 1 0 4H21a1.7 1.7 0 0 0-1.6 1Z"/>,
  ],
  shield: [
    <path key="a" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>,
  ],
  "shield-check": [
    <path key="a" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>,
    <path key="b" d="m9 12 2 2 4-5"/>,
  ],
  trash: [
    <path key="a" d="M3 6h18"/>,
    <path key="b" d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>,
    <path key="c" d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>,
    <path key="d" d="M10 11v6"/>,
    <path key="e" d="M14 11v6"/>,
  ],
  upload: [
    <path key="a" d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>,
    <path key="b" d="m17 8-5-5-5 5"/>,
    <path key="c" d="M12 3v12"/>,
  ],
  x: [
    <path key="a" d="M18 6 6 18"/>,
    <path key="b" d="m6 6 12 12"/>,
  ],
};

function Icon({ name, size = 16, strokeWidth = 2, className = "", title = null }) {
  const paths = ICON_PATHS[name] || ICON_PATHS.circle;
  return (
    <svg
      className={`icon ${className}`.trim()}
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      role={title ? "img" : "presentation"}
      aria-hidden={title ? "false" : "true"}
    >
      {title && <title>{title}</title>}
      {paths}
    </svg>
  );
}

function IconText({ name, children, after = false, size = 16, className = "" }) {
  return (
    <span className={`icon-text ${className}`.trim()}>
      {!after && <Icon name={name} size={size}/>}
      <span>{children}</span>
      {after && <Icon name={name} size={size}/>}
    </span>
  );
}

window.Icon = Icon;
window.IconText = IconText;