/* eslint-disable react/prop-types */
/**
 * Icon · librería unificada estilo Tabler outline.
 *
 * Reglas:
 * - viewBox 24×24 siempre
 * - stroke 1.5, currentColor, linecap/linejoin round
 * - sin fill (excepción: marcadores activos)
 *
 * Uso:  <Icon name="arrow-right" size={20} />
 */

const ICONS = {
  'arrow-right': (
    <g><path d="M5 12h14M13 6l6 6-6 6"/></g>
  ),
  'arrow-down': (
    <g><path d="M12 5v14M6 13l6 6 6-6"/></g>
  ),
  'arrow-up-right': (
    <g><path d="M7 17L17 7M8 7h9v9"/></g>
  ),
  'chevron-down': (
    <g><path d="M6 9l6 6 6-6"/></g>
  ),
  'chevron-right': (
    <g><path d="M9 6l6 6-6 6"/></g>
  ),
  'plus': (
    <g><path d="M12 5v14M5 12h14"/></g>
  ),
  'minus': (
    <g><path d="M5 12h14"/></g>
  ),
  'close': (
    <g><path d="M6 6l12 12M18 6L6 18"/></g>
  ),
  'menu': (
    <g><path d="M4 7h16M4 12h16M4 17h16"/></g>
  ),
  'search': (
    <g>
      <circle cx="10.5" cy="10.5" r="6.5"/>
      <path d="M15.5 15.5L20 20"/>
    </g>
  ),
  'building': (
    <g>
      <path d="M4 20V8l8-4 8 4v12"/>
      <path d="M4 20h16"/>
      <path d="M9 20v-6h6v6"/>
      <path d="M8 11h1M11 11h1M14 11h1"/>
    </g>
  ),
  'compass': (
    <g>
      <circle cx="12" cy="12" r="9"/>
      <path d="M14.5 9.5L13 13l-3.5 1.5L11 11l3.5-1.5z"/>
    </g>
  ),
  'people': (
    <g>
      <circle cx="9" cy="9" r="3"/>
      <circle cx="17" cy="10" r="2.5"/>
      <path d="M3 19c0-3 2.7-5 6-5s6 2 6 5"/>
      <path d="M14.5 19c0-2 1.8-3.5 4-3.5s2.5 1.5 2.5 3.5"/>
    </g>
  ),
  'target': (
    <g>
      <circle cx="12" cy="12" r="9"/>
      <circle cx="12" cy="12" r="5"/>
      <circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none"/>
    </g>
  ),
  'data': (
    <g>
      <path d="M4 20V10M9 20V4M14 20v-9M19 20v-5"/>
    </g>
  ),
  'spark': (
    <g>
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4"/>
      <path d="M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6"/>
    </g>
  ),
  'mail': (
    <g>
      <rect x="3" y="5" width="18" height="14" rx="1.5"/>
      <path d="M3 7l9 6 9-6"/>
    </g>
  ),
  'phone': (
    <g>
      <path d="M4 5c0 9 6 15 15 15l1.5-3.5-4-2-2 2c-3-1.5-4.5-3-6-6l2-2-2-4z"/>
    </g>
  ),
  'pin': (
    <g>
      <path d="M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z"/>
      <circle cx="12" cy="9.5" r="2.5"/>
    </g>
  ),
  'clock': (
    <g>
      <circle cx="12" cy="12" r="9"/>
      <path d="M12 7v5l3.5 2"/>
    </g>
  ),
  'globe': (
    <g>
      <circle cx="12" cy="12" r="9"/>
      <path d="M3 12h18M12 3c3 3 4.5 6 4.5 9s-1.5 6-4.5 9c-3-3-4.5-6-4.5-9S9 6 12 3z"/>
    </g>
  ),
  'check': (
    <g><path d="M4.5 12.5l5 5 10-11"/></g>
  ),
  /* Social */
  'social-facebook': (
    <g><path d="M14 8h2V5h-2a3 3 0 0 0-3 3v2H9v3h2v8h3v-8h2.5l.5-3H14V8c0-.5.4-1 1-1z" fill="currentColor" stroke="none"/></g>
  ),
  'social-instagram': (
    <g>
      <rect x="3.5" y="3.5" width="17" height="17" rx="4.5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17" cy="7" r="1" fill="currentColor" stroke="none"/>
    </g>
  ),
  'social-linkedin': (
    <g>
      <rect x="3" y="3" width="18" height="18" rx="2"/>
      <circle cx="7.5" cy="8" r="1.2" fill="currentColor" stroke="none"/>
      <path d="M6 10.5v7M9.5 17.5v-4.2c0-1.5 1-2.3 2.2-2.3s2.3.7 2.3 2.3v4.2M16 17.5v-4.5c0-1.4 1-2.2 2.2-2.2s2.3.8 2.3 2.2v4.5"/>
    </g>
  ),
  'social-spotify': (
    <g>
      <circle cx="12" cy="12" r="9"/>
      <path d="M7.5 9.5c3-1 6-1 9 0.5M7.5 12.5c2.5-0.6 5.5-0.6 8 0.7M8 15.4c2-0.5 4.5-0.5 6.5 0.6" strokeLinecap="round"/>
    </g>
  ),
};

function Icon({ name, size = 24, stroke = 1.5, style = {}, ...rest }) {
  const path = ICONS[name];
  if (!path) {
    console.warn(`[Icon] missing: ${name}`);
    return null;
  }
  return (
    <svg
      width={size} height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      style={{ display: 'inline-block', flexShrink: 0, ...style }}
      {...rest}
    >
      {path}
    </svg>
  );
}

window.Icon = Icon;
