// icons.jsx — minimal stroke-icon set, sized for tap targets (24px default).
// All icons inherit currentColor. SF-symbol-ish style. Keep glyphs simple.

const Icon = ({ name, size = 24, stroke = 1.8, style }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round', style,
  };
  switch (name) {
    case 'sun':
      return <svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>;
    case 'phone':
      return <svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></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 'clock':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case 'note':
      return <svg {...props}><path d="M4 4h11l5 5v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M14 4v5h5"/></svg>;
    case 'flame':
      return <svg {...props}><path d="M12 2c1 3 4 5 4 9a4 4 0 1 1-8 0c0-2 1-3 1-5 0-1-1-2-1-2 4 1 4-2 4-2z"/></svg>;
    case 'leaf':
      return <svg {...props}><path d="M21 3c0 9-7 14-14 14-2 0-4-1-4-1s5-2 8-5c-3 0-5-2-5-2 4 0 6-2 6-2-3 0-5-2-5-2 6 0 9-2 14-2z"/></svg>;
    case 'plus':
      return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'check':
      return <svg {...props}><path d="M4 12l5 5L20 6"/></svg>;
    case 'x':
      return <svg {...props}><path d="M6 6l12 12M6 18L18 6"/></svg>;
    case 'chevron':
      return <svg {...props}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron-down':
      return <svg {...props}><path d="M6 9l6 6 6-6"/></svg>;
    case 'chevron-left':
      return <svg {...props}><path d="M15 6l-6 6 6 6"/></svg>;
    case 'arrow-up':
      return <svg {...props}><path d="M12 19V5M5 12l7-7 7 7"/></svg>;
    case 'arrow-right':
      return <svg {...props}><path d="M5 12h14M12 5l7 7-7 7"/></svg>;
    case 'home':
      return <svg {...props}><path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z"/></svg>;
    case 'pipeline':
      return <svg {...props}><rect x="3" y="5" width="6" height="14" rx="1.5"/><rect x="11" y="5" width="6" height="9" rx="1.5"/><rect x="19" y="5" width="2" height="14" rx="1"/></svg>;
    case 'sprout':
      return <svg {...props}><path d="M12 21v-7"/><path d="M12 14c-3 0-6-2-6-6 3 0 6 2 6 6z"/><path d="M12 14c3 0 6-2 6-6-3 0-6 2-6 6z"/></svg>;
    case 'bell':
      return <svg {...props}><path d="M18 16v-5a6 6 0 0 0-12 0v5l-2 3h16z"/><path d="M10 19a2 2 0 0 0 4 0"/></svg>;
    case 'camera':
      return <svg {...props}><path d="M3 8h4l2-3h6l2 3h4a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="4"/></svg>;
    case 'clipboard':
      return <svg {...props}><rect x="6" y="4" width="12" height="17" rx="2"/><rect x="9" y="2" width="6" height="4" rx="1"/><path d="M9 11h6M9 15h4"/></svg>;
    case 'edit':
      return <svg {...props}><path d="M3 21h4l11-11-4-4L3 17v4z"/><path d="M14 6l4 4"/></svg>;
    case 'pin':
      return <svg {...props}><path d="M12 21s-7-6-7-12a7 7 0 0 1 14 0c0 6-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'tag':
      return <svg {...props}><path d="M3 12l9-9h9v9l-9 9-9-9z"/><circle cx="15.5" cy="8.5" r="1"/></svg>;
    case 'dollar':
      return <svg {...props}><path d="M12 2v20M17 6H9a3 3 0 0 0 0 6h6a3 3 0 0 1 0 6H7"/></svg>;
    case 'car':
      return <svg {...props}><path d="M3 14l2-5a2 2 0 0 1 2-1.4h10a2 2 0 0 1 2 1.4l2 5"/><path d="M3 14h18v4a1 1 0 0 1-1 1h-1a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H4a1 1 0 0 1-1-1z"/></svg>;
    case 'sparkle':
      return <svg {...props}><path d="M12 3l1.5 5L18 9.5 13.5 11 12 16l-1.5-5L6 9.5 10.5 8z"/><path d="M19 17l.7 1.7L21.5 19l-1.8.6L19 21l-.7-1.4-1.8-.6 1.8-.7z"/></svg>;
    case 'check-circle':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></svg>;
    case 'dot':
      return <svg {...props}><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>;
    default: return null;
  }
};

window.Icon = Icon;