/* global React */
const { useState } = React;

// Lucide-style inline SVGs — stroke 1.75 / rounded / 24px grid
const sw = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.75, strokeLinecap: 'round', strokeLinejoin: 'round' };

function I({ size = 20, children }) {
  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', ...sw }, children);
}

const Icons = {
  Arrow: ({ size }) => <I size={size}><path d="M5 12h14M13 6l6 6-6 6"/></I>,
  Card:  ({ size }) => <I size={size}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></I>,
  Clock: ({ size }) => <I size={size}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></I>,
  Globe: ({ size }) => <I size={size}><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"/></I>,
  Send:  ({ size }) => <I size={size}><path d="M22 2 11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></I>,
  Shield:({ size }) => <I size={size}><path d="M12 2 4 5v7c0 5 3.5 8 8 10 4.5-2 8-5 8-10V5z"/></I>,
  Spark: ({ size }) => <I size={size}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l3 3M15 15l3 3M6 18l3-3M15 9l3-3"/></I>,
  Coins: ({ size }) => <I size={size}><circle cx="9" cy="9" r="6"/><path d="M16 14a6 6 0 1 1-7 7"/></I>,
  Phone: ({ size }) => <I size={size}><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></I>,
  Search:({ size }) => <I size={size}><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></I>,
  ChevD: ({ size }) => <I size={size}><path d="m6 9 6 6 6-6"/></I>,
  ChevU: ({ size }) => <I size={size}><path d="m6 15 6-6 6 6"/></I>,
  Plus:  ({ size }) => <I size={size}><path d="M12 5v14M5 12h14"/></I>,
  Check: ({ size }) => <I size={size}><path d="M5 12l4 4 10-10"/></I>,
  Apple: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12.5a3.6 3.6 0 0 1 1.75-3.04 3.7 3.7 0 0 0-2.91-1.57c-1.23-.13-2.4.73-3.02.73-.63 0-1.59-.71-2.62-.7a3.87 3.87 0 0 0-3.27 1.99c-1.4 2.43-.36 6 1 7.97.67.96 1.47 2.04 2.51 2 1-.04 1.39-.65 2.6-.65 1.21 0 1.55.65 2.61.63 1.08-.02 1.76-.97 2.43-1.94a8.65 8.65 0 0 0 1.1-2.26 3.55 3.55 0 0 1-2.18-3.16ZM14 5.1A3.46 3.46 0 0 0 14.8 2a3.6 3.6 0 0 0-2.34 1.23 3.36 3.36 0 0 0-.85 3A3 3 0 0 0 14 5.1Z"/></svg>
  ),
  Play: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M3.5 3.7v16.6c0 .42.46.68.82.46l12.6-8.3a.55.55 0 0 0 0-.92L4.32 3.24a.55.55 0 0 0-.82.46Z"/></svg>
  ),
};

window.Icons = Icons;
