/* global React */

const Icon = ({ name, size = 22, stroke = 1.6, ...rest }) => {
  const s = size;
  const props = {
    width: s, height: s, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round', ...rest,
  };
  switch (name) {
    case 'pin': return (
      <svg {...props}><path d="M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z"/><circle cx="12" cy="9.5" r="2.4"/></svg>
    );
    case 'engine': return (
      <svg {...props}><path d="M4 14V10h2V8h4V6h4v2h3l3 3v3h-2v3h-3v2h-4v-2H8v-3H4z"/><path d="M14 12h3"/></svg>
    );
    case 'route': return (
      <svg {...props}><circle cx="6" cy="6" r="2.2"/><circle cx="18" cy="18" r="2.2"/><path d="M6 8.2v3.8a4 4 0 0 0 4 4h2a4 4 0 0 1 4 4"/></svg>
    );
    case 'panic': return (
      <svg {...props}><path d="M12 3v3"/><path d="M5 7l2 2"/><path d="M19 7l-2 2"/><circle cx="12" cy="14" r="6"/><path d="M12 11v3"/><circle cx="12" cy="17" r=".7" fill="currentColor"/></svg>
    );
    case 'speed': return (
      <svg {...props}><path d="M3 14a9 9 0 0 1 18 0"/><path d="M12 14l4-4"/><circle cx="12" cy="14" r="1.4" fill="currentColor"/></svg>
    );
    case 'ignition': return (
      <svg {...props}><circle cx="12" cy="13" r="5"/><path d="M12 4v3"/><path d="M9.5 5.5l1.5 2"/><path d="M14.5 5.5l-1.5 2"/></svg>
    );
    case 'fence': return (
      <svg {...props}><circle cx="12" cy="12" r="8" strokeDasharray="3 4"/><circle cx="12" cy="12" r="2.4" fill="currentColor" stroke="none"/></svg>
    );
    case 'mirror': return (
      <svg {...props}><rect x="3" y="5" width="8" height="14" rx="1.5"/><rect x="13" y="5" width="8" height="14" rx="1.5"/><path d="M12 4v16"/></svg>
    );
    case 'arrow': return (
      <svg {...props}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>
    );
    case 'whatsapp': return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" {...rest}>
        <path d="M17.5 14.4c-.3-.2-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7 0-.3-.2-1.2-.5-2.3-1.4-.9-.7-1.4-1.6-1.6-1.9-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.5 1 2.9 1.1 3.1c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.6 1.4 5.1L2 22l5.1-1.3c1.5.8 3.2 1.3 4.9 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
      </svg>
    );
    case 'sun': return (
      <svg {...props}><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 'moon': return (
      <svg {...props}><path d="M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z"/></svg>
    );
    case 'check': return (
      <svg {...props}><path d="M5 12l4 4 10-10"/></svg>
    );
    case 'play': return (
      <svg {...props} fill="currentColor" stroke="none"><path d="M7 5l12 7-12 7z"/></svg>
    );
    case 'shield': return (
      <svg {...props}><path d="M12 3l8 3v5c0 5-3.4 8.7-8 10-4.6-1.3-8-5-8-10V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>
    );
    case 'globe': return (
      <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
    );
    case 'phone': return (
      <svg {...props}><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg>
    );
    case 'mic': return (
      <svg {...props}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6"/></svg>
    );
    case 'cam': return (
      <svg {...props}><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3z"/></svg>
    );
    case 'magnet': return (
      <svg {...props}><path d="M5 4v8a7 7 0 0 0 14 0V4"/><path d="M5 4h4v4H5zM15 4h4v4h-4z"/></svg>
    );
    case 'signal-block': return (
      <svg {...props}><path d="M4 20l16-16"/><path d="M5 14a9 9 0 0 1 12-2"/><path d="M8 18a4 4 0 0 1 4-1.5"/></svg>
    );
    case 'car':       return <svg {...props}><path d="M4 14l1.5-4a2 2 0 0 1 2-1.5h9a2 2 0 0 1 2 1.5L20 14"/><rect x="3" y="14" width="18" height="4" rx="1.5"/><circle cx="7.5" cy="18.5" r="1.4" fill="currentColor"/><circle cx="16.5" cy="18.5" r="1.4" fill="currentColor"/></svg>;
    case 'suv':       return <svg {...props}><path d="M3 15l1-3a2 2 0 0 1 2-1.5h11l3 3v1.5"/><rect x="3" y="14" width="18" height="4" rx="1.5"/><circle cx="7.5" cy="18.5" r="1.4" fill="currentColor"/><circle cx="16.5" cy="18.5" r="1.4" fill="currentColor"/></svg>;
    case 'moto':      return <svg {...props}><circle cx="6" cy="17" r="3"/><circle cx="18" cy="17" r="3"/><path d="M6 17l4-7h6l2 4"/><path d="M10 10h4"/></svg>;
    case 'truck':     return <svg {...props}><rect x="2" y="9" width="11" height="8" rx="1"/><path d="M13 11h4l3 3v3h-7"/><circle cx="6.5" cy="18" r="1.4" fill="currentColor"/><circle cx="17" cy="18" r="1.4" fill="currentColor"/></svg>;
    case 'trailer':   return <svg {...props}><rect x="2" y="8" width="9" height="9" rx="1"/><rect x="11" y="11" width="9" height="6" rx="1"/><circle cx="6.5" cy="18.5" r="1.4" fill="currentColor"/><circle cx="14" cy="18.5" r="1.4" fill="currentColor"/><circle cx="18" cy="18.5" r="1.4" fill="currentColor"/></svg>;
    default: return null;
  }
};

const VEHICLE_ICON = { Carros:'car', Camionetas:'suv', Motos:'moto', Camiones:'truck', 'Tráilers':'trailer' };
const EXTRA_ICON = { 'Botón de pánico':'panic', 'Micrófono en cabina':'mic', 'Dash cam':'cam', 'GPS de carga solar':'sun', 'GPS portátil magnético':'magnet', 'Antijammer 4G':'signal-block' };

window.Icon = Icon;
window.VEHICLE_ICON = VEHICLE_ICON;
window.EXTRA_ICON = EXTRA_ICON;