// ============================================================
// GARABATO · Iconos outline (Lucide-style)
// Biblioteca curada de ~40 iconos. Todos 24x24, stroke 2.
// ============================================================

const Icon = ({ name, size = 24, stroke = 2, color, className = '', style = {}, ...rest }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: color || 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    className, style, xmlns: 'http://www.w3.org/2000/svg',
    ...rest,
  };
  const P = 'path';
  switch (name) {
    case 'arrow-right': return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right': return <svg {...props}><path d="M7 17 17 7M7 7h10v10"/></svg>;
    case 'arrow-down': return <svg {...props}><path d="M12 5v14M5 12l7 7 7-7"/></svg>;
    case 'arrow-left': return <svg {...props}><path d="M19 12H5M11 5l-7 7 7 7"/></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 'menu': return <svg {...props}><path d="M4 6h16M4 12h16M4 18h16"/></svg>;
    case 'close': return <svg {...props}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case 'search': return <svg {...props}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>;
    case 'plus': return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus': return <svg {...props}><path d="M5 12h14"/></svg>;
    case 'check': return <svg {...props}><path d="M20 6 9 17l-5-5"/></svg>;
    case 'heart': return <svg {...props}><path d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 12 5a5.5 5.5 0 0 0-10 3.5C2 10.8 3.5 12.5 5 14l7 7Z"/></svg>;
    case 'star': return <svg {...props}><path d="M12 2 15.1 9l7.9.9-6 5.3 1.8 7.8L12 19l-6.8 4 1.8-7.8-6-5.3L9 9Z"/></svg>;
    case 'sparkles': return <svg {...props}><path d="m12 3-1.9 5.8L4 10l5.9 1.9 1.9 5.9 1.9-5.9L20 10l-5.9-1.9L12 3Zm7 13-.9 2.8L15 20l2.8.9L19 24l.9-2.8L23 20l-2.8-.9Z"/></svg>;
    case 'mail': return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
    case 'phone': return <svg {...props}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 20 20 0 0 1-8.6-3 20 20 0 0 1-6-6A20 20 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7l.9 4a2 2 0 0 1-.5 2L7.9 11a16 16 0 0 0 6 6l1.3-1.4a2 2 0 0 1 2-.5l4 .9a2 2 0 0 1 1.7 2Z"/></svg>;
    case 'user': return <svg {...props}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>;
    case 'users': return <svg {...props}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg>;
    case 'settings': return <svg {...props}><path d="M12.2 2a2 2 0 0 1 2 2l.1 1a7.9 7.9 0 0 1 1.8 1l1-.4a2 2 0 0 1 2.4.9l.6 1a2 2 0 0 1-.3 2.5l-.8.8a8 8 0 0 1 0 2l.8.8a2 2 0 0 1 .3 2.5l-.6 1a2 2 0 0 1-2.4 1l-1-.5a7.9 7.9 0 0 1-1.8 1l-.1 1a2 2 0 0 1-2 2h-1.2a2 2 0 0 1-2-2v-1a7.9 7.9 0 0 1-1.8-1l-1 .4a2 2 0 0 1-2.4-.9l-.6-1a2 2 0 0 1 .3-2.5l.8-.8a8 8 0 0 1 0-2l-.8-.8a2 2 0 0 1-.3-2.5l.6-1a2 2 0 0 1 2.4-.9l1 .4a7.9 7.9 0 0 1 1.8-1V4a2 2 0 0 1 2-2Z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'zap': return <svg {...props}><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z"/></svg>;
    case 'bolt': return <svg {...props}><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z"/></svg>;
    case 'palette': return <svg {...props}><circle cx="13.5" cy="6.5" r="1.5"/><circle cx="17.5" cy="10.5" r="1.5"/><circle cx="8.5" cy="7.5" r="1.5"/><circle cx="6.5" cy="12.5" r="1.5"/><path d="M12 2a10 10 0 1 0 0 20 3 3 0 0 0 2.1-5.1 3 3 0 0 1 2.1-5.1h1.8A4 4 0 0 0 22 8a10 10 0 0 0-10-6Z"/></svg>;
    case 'type': return <svg {...props}><path d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>;
    case 'image': return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-5-5L5 21"/></svg>;
    case 'layers': return <svg {...props}><path d="M12 2 2 7l10 5 10-5-10-5ZM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>;
    case 'grid': return <svg {...props}><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"/><rect x="14" y="14" width="7" height="7"/></svg>;
    case 'play': return <svg {...props}><path d="M6 3v18l15-9Z"/></svg>;
    case 'pause': return <svg {...props}><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>;
    case 'download': return <svg {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>;
    case 'external': return <svg {...props}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"/></svg>;
    case 'link': return <svg {...props}><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>;
    case 'globe': return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20Z"/></svg>;
    case 'clock': return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    case 'calendar': return <svg {...props}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
    case 'folder': return <svg {...props}><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2Z"/></svg>;
    case 'file': return <svg {...props}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8ZM14 2v6h6"/></svg>;
    case 'edit': return <svg {...props}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.4 2.6a2 2 0 1 1 2.8 2.8L12 14.6l-4 1 1-4Z"/></svg>;
    case 'trash': return <svg {...props}><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/></svg>;
    case 'share': return <svg {...props}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg>;
    case 'eye': return <svg {...props}><path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'lock': return <svg {...props}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>;
    case 'shield': return <svg {...props}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg>;
    case 'home': return <svg {...props}><path d="m3 12 9-9 9 9M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10"/></svg>;
    case 'bookmark': return <svg {...props}><path d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z"/></svg>;
    case 'smile': return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>;
    default:
      return <svg {...props}><circle cx="12" cy="12" r="9"/></svg>;
  }
};

window.Icon = Icon;