// components/Icons.jsx
// Lightweight inline SVG icons — simple shapes only.

const Icon = ({ name, size = 20, stroke = 2.5 }) => {
  const common = {
    width: size, height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: stroke,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
  };
  switch (name) {
    case 'search':
      return (<svg {...common}><circle cx="10.5" cy="10.5" r="6.5"/><path d="M20 20l-4.8-4.8"/></svg>);
    case 'menu':
      return (<svg {...common}><path d="M3 6h18M3 12h18M3 18h18"/></svg>);
    case 'close':
      return (<svg {...common}><path d="M5 5l14 14M19 5L5 19"/></svg>);
    case 'arrow-right':
      return (<svg {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>);
    case 'arrow-up-right':
      return (<svg {...common}><path d="M7 17L17 7M8 7h9v9"/></svg>);
    case 'play':
      return (<svg {...common}><path d="M7 4l12 8-12 8V4z" fill="currentColor"/></svg>);
    case 'chat':
      return (<svg {...common}><path d="M4 5h16v11H8l-4 4V5z"/></svg>);
    case 'sparkle':
      return (<svg {...common}><path d="M12 3v5M12 16v5M3 12h5M16 12h5M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg>);
    case 'bolt':
      return (<svg {...common}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/></svg>);
    case 'video':
      return (<svg {...common}><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3"/></svg>);
    case 'code':
      return (<svg {...common}><path d="M8 8l-4 4 4 4M16 8l4 4-4 4M14 4l-4 16"/></svg>);
    case 'tools':
      return (<svg {...common}><path d="M14 3a4 4 0 015 5l-9 9-4 1 1-4 9-9z"/><path d="M3 21l3-3"/></svg>);
    case 'clock':
      return (<svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case 'tag':
      return (<svg {...common}><path d="M3 12V4h8l10 10-8 8L3 12z"/><circle cx="7.5" cy="7.5" r="1"/></svg>);
    case 'star':
      return (<svg {...common}><path d="M12 3l2.9 6 6.6.9-4.8 4.6 1.1 6.5L12 18l-5.8 3 1.1-6.5L2.5 9.9 9.1 9 12 3z"/></svg>);
    case 'fire':
      return (<svg {...common}><path d="M12 3s4 4 4 8a4 4 0 11-8 0c0-2 2-3 2-5 0-1-.5-2-.5-2s1 1 2.5-1z"/></svg>);
    case 'heart':
      return (<svg {...common}><path d="M12 20s-7-4.5-7-10a4 4 0 017-2.7A4 4 0 0119 10c0 5.5-7 10-7 10z"/></svg>);
    case 'pencil':
      return (<svg {...common}><path d="M4 20l4-1 11-11-3-3L5 16l-1 4z"/></svg>);
    case 'check':
      return (<svg {...common}><path d="M4 12l5 5L20 6"/></svg>);
    case 'gift':
      return (<svg {...common}><rect x="3" y="8" width="18" height="12" rx="2"/><path d="M3 12h18M12 8v12M8 8a2 2 0 110-4c2 0 4 4 4 4s2-4 4-4a2 2 0 110 4"/></svg>);
    case 'line':
      return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M12 2C6.5 2 2 5.7 2 10.3c0 4.1 3.6 7.5 8.4 8.1.3.1.8.2.9.5.1.3.1.7 0 1l-.2 1c-.1.3-.3 1.2 1 .7 1.3-.5 7-4.1 9.6-7h0C23 12.8 23 11.6 23 10.3 23 5.7 18.5 2 12 2z"/></svg>);
    case 'home':
      return (<svg {...common}><path d="M3 12l9-8 9 8M5 10v10h4v-6h6v6h4V10"/></svg>);
    default:
      return null;
  }
};

Object.assign(window, { Icon });