// Icon.jsx — Lucide icon wrapper.
// Usage: <Icon name="truck" size={20} />
// Renders <i data-lucide="name"> and triggers lucide.createIcons() after mount.

function Icon({ name, size = 20, strokeWidth = 1.75, color, style = {}, className = "" }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = "";
      const i = document.createElement("i");
      i.setAttribute("data-lucide", name);
      ref.current.appendChild(i);
      window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": strokeWidth } });
    }
  }, [name, size, strokeWidth]);
  return (
    <span
      ref={ref}
      className={className}
      style={{ display: "inline-flex", color, ...style }}
      aria-hidden="true"
    />
  );
}

window.Icon = Icon;