/* global React */
const { useState, useEffect, useMemo, useRef, useCallback } = React;

// ===== Icons (inline SVG, 18px default) =====
const Icon = ({ name, size = 18, ...p }) => {
  const s = size;
  const stroke = "currentColor";
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", ...p };
  switch (name) {
    case "dashboard": return (<svg {...common}><rect x="3" y="3" width="7" height="9" rx="2"/><rect x="14" y="3" width="7" height="5" rx="2"/><rect x="14" y="12" width="7" height="9" rx="2"/><rect x="3" y="16" width="7" height="5" rx="2"/></svg>);
    case "home": return (<svg {...common}><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></svg>);
    case "parking": return (<svg {...common}><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 17V7h4a3 3 0 0 1 0 6H9"/></svg>);
    case "users": return (<svg {...common}><circle cx="9" cy="8" r="3.2"/><path d="M3.5 19c.7-3 3-4.6 5.5-4.6S14 16 14.7 19"/><circle cx="17" cy="9" r="2.5"/><path d="M15.5 14.5c2.4 0 4.2 1.3 4.7 3.5"/></svg>);
    case "report": return (<svg {...common}><path d="M5 4h11l3 3v13a1 1 0 0 1-1 1H5z"/><path d="M9 12v5M12 9v8M15 14v3"/></svg>);
    case "search": return (<svg {...common}><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>);
    case "bell": return (<svg {...common}><path d="M6 16V11a6 6 0 1 1 12 0v5l1.5 2.5h-15z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>);
    case "plus": return (<svg {...common}><path d="M12 5v14M5 12h14"/></svg>);
    case "edit": return (<svg {...common}><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m13 7 4 4"/></svg>);
    case "trash": return (<svg {...common}><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/><path d="M6 6v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6"/></svg>);
    case "close": return (<svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>);
    case "check": return (<svg {...common}><path d="M5 12l5 5L20 7"/></svg>);
    case "printer": return (<svg {...common}><path d="M6 9V3h12v6"/><rect x="3" y="9" width="18" height="9" rx="2"/><path d="M6 14h12v7H6z"/></svg>);
    case "download": return (<svg {...common}><path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M4 21h16"/></svg>);
    case "money": return (<svg {...common}><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M5 9h.01M19 15h.01"/></svg>);
    case "calendar": return (<svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>);
    case "drop": return (<svg {...common}><path d="M12 3s6 7 6 11a6 6 0 1 1-12 0c0-4 6-11 6-11z"/></svg>);
    case "bolt": return (<svg {...common}><path d="M13 3 5 14h6l-1 7 8-11h-6z"/></svg>);
    case "camera": return (<svg {...common}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7l2-3h4l2 3"/><circle cx="12" cy="13" r="3.5"/></svg>);
    case "warn": return (<svg {...common}><path d="M12 3 2 21h20z"/><path d="M12 10v5M12 18h.01"/></svg>);
    case "qr": return (<svg {...common}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><path d="M14 14h3v3M21 21v-3M21 14h-2M14 21h3"/></svg>);
    case "up": return (<svg {...common}><path d="M7 17 17 7M17 7H9M17 7v8"/></svg>);
    case "down": return (<svg {...common}><path d="M17 7 7 17M7 17h8M7 17V9"/></svg>);
    case "more": return (<svg {...common}><circle cx="6" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="18" cy="12" r="1.4"/></svg>);
    case "car": return (<svg {...common}><path d="M3 13l2-6a2 2 0 0 1 2-1h10a2 2 0 0 1 2 1l2 6"/><rect x="3" y="13" width="18" height="6" rx="2"/><circle cx="7.5" cy="17.5" r="1.2"/><circle cx="16.5" cy="17.5" r="1.2"/></svg>);
    case "phone": return (<svg {...common}><path d="M4 5c0 9 6 15 15 15l2-4-5-2-2 2c-2-1-4-3-5-5l2-2-2-5z"/></svg>);
    case "tag": return (<svg {...common}><path d="M3 12V4h8l10 10-8 8z"/><circle cx="8" cy="8" r="1.5"/></svg>);
    case "filter": return (<svg {...common}><path d="M3 5h18M6 12h12M10 19h4"/></svg>);
    case "moon": return (<svg {...common}><path d="M20 14A8 8 0 0 1 10 4a8 8 0 1 0 10 10z"/></svg>);
    case "sun": return (<svg {...common}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>);
    case "back": return (<svg {...common}><path d="M19 12H5M12 5l-7 7 7 7"/></svg>);
    case "doc": return (<svg {...common}><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5"/></svg>);
    default: return null;
  }
};

window.Icon = Icon;