// ReturnScribe — Category icons (SF Symbol approximations)
// Each function is a monoline approximation of the named SF Symbol.
// In SwiftUI handoff, replace with the real SF Symbol via Image(systemName:).

function CategoryIcon({ symbol, size = 22, color = 'currentColor', filled = true }) {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: filled ? color : 'none',
    stroke: filled ? 'none' : color,
    strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round',
    style: { display: 'inline-block', flexShrink: 0 },
  };
  switch (symbol) {
    case 'tshirt.fill':
      return <svg {...props}><path d="M8.5 3 5 5.5 3 9l3.5 2 1-2v9.5A1.5 1.5 0 0 0 9 20h6a1.5 1.5 0 0 0 1.5-1.5V9l1 2L21 9l-2-3.5L15.5 3 14 5.5a2 2 0 0 1-4 0L8.5 3Z"/></svg>;
    case 'shoe.fill':
      return <svg {...props}><path d="M3 16v-3l3-1 2-4 4 1 2 3 6 1.5a2.5 2.5 0 0 1 2 2.5V17H3v-1Zm0 2h18v2H3v-2Z"/></svg>;
    case 'figure.walk':
      return <svg {...props}><circle cx="14" cy="4.5" r="2"/><path d="M13 8l-3 4 2 2v6h2v-7l3 2v5h2v-6l-3-3 1-4-4 1Z"/></svg>;
    case 'laptopcomputer':
      return <svg {...props} fill="none" stroke={color} strokeWidth="1.7"><rect x="4" y="5" width="16" height="11" rx="2"/><path d="M2 19h20"/></svg>;
    case 'cpu.fill':
      return <svg {...props}><path d="M9 2v2H7.5A3.5 3.5 0 0 0 4 7.5V9H2v2h2v2H2v2h2v1.5A3.5 3.5 0 0 0 7.5 20H9v2h2v-2h2v2h2v-2h1.5a3.5 3.5 0 0 0 3.5-3.5V15h2v-2h-2v-2h2V9h-2V7.5A3.5 3.5 0 0 0 16.5 4H15V2h-2v2h-2V2H9Zm-1 6h8v8H8V8Z"/></svg>;
    case 'iphone':
      return <svg {...props} fill="none" stroke={color} strokeWidth="1.7"><rect x="7" y="2.5" width="10" height="19" rx="2.4"/><path d="M10.5 5h3"/></svg>;
    case 'headphones':
      return <svg {...props}><path d="M4 14v-2a8 8 0 0 1 16 0v2h-2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v-7M4 14h2a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4v-7Z"/></svg>;
    case 'bed.double.fill':
      return <svg {...props}><path d="M3 6v8h18V11a3 3 0 0 0-3-3h-4v3h-4V8H6a3 3 0 0 0-3 3v3M3 14v5h2v-2h14v2h2v-5H3Z"/><circle cx="7" cy="10.5" r="1.2"/><circle cx="17" cy="10.5" r="1.2" opacity="0.6"/></svg>;
    case 'lamp.table.fill':
      return <svg {...props}><path d="M9 3h6l2 5H7l2-5Zm-1.5 6.5h9L15 11v3.5h-1V18h2v3H8v-3h2v-3.5H9V11l-1.5-1.5Z"/></svg>;
    case 'refrigerator.fill':
      return <svg {...props}><path d="M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 8h12V4H6v6Zm3-4h2v2H9V6Zm0 7h2v3H9v-3Z"/></svg>;
    case 'fork.knife':
      return <svg {...props} fill="none" stroke={color} strokeWidth="1.7"><path d="M7 2v8a2 2 0 0 1-2 2v10M7 2v6m4-6v6M9 2v8"/><path d="M17 2c-2 0-3 2-3 5s1 5 3 5v10"/></svg>;
    case 'face.smiling.fill':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="9" cy="10" r="1.2" fill={filled ? '#fff' : color} opacity="0.6"/><circle cx="15" cy="10" r="1.2" fill={filled ? '#fff' : color} opacity="0.6"/><path d="M8.5 14.5c1 1.3 2.2 2 3.5 2s2.5-.7 3.5-2" fill="none" stroke={filled ? '#fff' : color} strokeWidth="1.5" strokeLinecap="round" opacity="0.6"/></svg>;
    case 'drop.fill':
      return <svg {...props}><path d="M12 3s7 7.5 7 12.5a7 7 0 0 1-14 0C5 10.5 12 3 12 3Z"/></svg>;
    case 'cross.case.fill':
      return <svg {...props}><path d="M9 3h6v3h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V3Zm2 2v3H5v11h14V8h-6V5h-2Zm0 7h2v2h2v2h-2v2h-2v-2H9v-2h2v-2Z" fill={color}/></svg>;
    case 'pills.fill':
      return <svg {...props}><path d="M3.5 8.5a4 4 0 0 1 5.7-5.7L13 6.6 6.6 13 3.5 8.5ZM17 10.5l-6 6a4 4 0 0 0 5.7 5.7l6-6a4 4 0 0 0-5.7-5.7Z"/></svg>;
    case 'figure.run':
      return <svg {...props}><circle cx="15" cy="4.5" r="2"/><path d="M13 8l-3 3 2 3-3 6h2.5l3-5 3 2v3h2v-4l-3-2.5 1-3 3 2 1-2-5-3-3 0.5Z"/></svg>;
    case 'dumbbell.fill':
      return <svg {...props}><path d="M2 9v6h2V9H2Zm3-2v10h3V7H5Zm4 4v2h6v-2H9Zm7-4v10h3V7h-3Zm4 2v6h2V9h-2Z"/></svg>;
    case 'tent.fill':
      return <svg {...props}><path d="M12 3 2 20h7l3-5 3 5h7L12 3Zm0 5 2 4h-4l2-4Z"/></svg>;
    case 'mountain.2.fill':
      return <svg {...props}><path d="M9 4 2 19h14L9 4Zm6 6-2.3 4.8L18 19h4l-7-9Z"/></svg>;
    case 'book.fill':
      return <svg {...props}><path d="M4 4a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm3 1v2h9V5H7Z"/></svg>;
    case 'gamecontroller.fill':
      return <svg {...props}><path d="M6 8h12a4 4 0 0 1 4 4v3a3 3 0 0 1-5.5 1.7L15 14H9l-1.5 2.7A3 3 0 0 1 2 15v-3a4 4 0 0 1 4-4Zm1 3v2H5v2h2v2h2v-2h2v-2H9v-2H7Zm10 1.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM15 11a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/></svg>;
    case 'puzzlepiece.fill':
      return <svg {...props}><path d="M9 3v2.5a1.5 1.5 0 0 0 3 0V3h5v5h2.5a1.5 1.5 0 0 1 0 3H17v5h-5v-2.5a1.5 1.5 0 0 0-3 0V21H4v-5h2.5a1.5 1.5 0 0 0 0-3H4V8h5V3Z"/></svg>;
    case 'figure.and.child.holdinghands':
      return <svg {...props}><circle cx="8" cy="4.5" r="2"/><circle cx="17" cy="6" r="1.6"/><path d="M6 8l-1 7h2v6h2v-6h1l1-3 2 1 1 4h1.5v4h2v-4h1l1-4-3-2-2 1-1-2-3-2H6Z"/></svg>;
    case 'pawprint.fill':
      return <svg {...props}><circle cx="6.5" cy="9" r="2"/><circle cx="17.5" cy="9" r="2"/><circle cx="9.5" cy="5" r="1.8"/><circle cx="14.5" cy="5" r="1.8"/><path d="M12 11c-3 0-5 2.5-5 5 0 2 1.5 3 3 3h4c1.5 0 3-1 3-3 0-2.5-2-5-5-5Z"/></svg>;
    case 'cart.fill':
      return <svg {...props}><path d="M2 3h3l.7 3H20l-2 8H7L5 5H2V3Zm5 5 1 5h9l1.2-5H7Zm2 11a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Zm9 0a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Z"/></svg>;
    case 'carrot.fill':
      return <svg {...props}><path d="M14 3l3 .5L20 7l-3 1-1-3-2-2Zm0 4 3 1-9 9c-1.5 1.5-4 1.5-5.5 0L14 7Zm-1-3-1 2 2 1 1-2-2-1Z"/></svg>;
    case 'cup.and.saucer.fill':
      return <svg {...props}><path d="M5 8h12v5a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4V8Zm12 1v4a2.5 2.5 0 0 0 0-4ZM3 19h16v2H3v-2Zm8-16-1 2 1.5 1.5L13 5l-1-1 1-1h-2Z"/></svg>;
    case 'pencil.and.ruler.fill':
      return <svg {...props}><path d="M17 2l5 5-3 3-5-5 3-3Zm-4 4 5 5-9 9-5 1 1-5 8-10Zm0 13 1 3 5-5-3-1-3 3Z"/></svg>;
    case 'wrench.and.screwdriver.fill':
      return <svg {...props}><path d="M14.5 2.5 11 6l1 2L5 15a3 3 0 0 0 4 4l7-7 2 1 3.5-3.5L18 5.5l-3.5-3Zm-9 14 2 2-3 3a1.4 1.4 0 1 1-2-2l3-3Z"/></svg>;
    case 'car.fill':
      return <svg {...props}><path d="M5 11l2-5h10l2 5h1a1.5 1.5 0 0 1 1.5 1.5V17h-3v-2H5v2H2v-4.5A1.5 1.5 0 0 1 3.5 11H5Zm2 0h10l-1-3H8l-1 3Zm-1 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm12 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/></svg>;
    case 'suitcase.fill':
      return <svg {...props}><path d="M9 2h6v3h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2v-1H6v1a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3V2Zm2 3h2V4h-2v1Zm-1 4v9h1V9h-1Zm3 0v9h1V9h-1Z"/></svg>;
    case 'gift.fill':
      return <svg {...props}><path d="M11 5h2v3h7v3H4V8h7V5ZM4 13h7v8H6a2 2 0 0 1-2-2v-6Zm9 0h7v6a2 2 0 0 1-2 2h-5v-8ZM8.5 2.5a2.5 2.5 0 0 1 3.5 0L12 3l-3 1-.5-1.5ZM12 3l3 1 .5-1.5a2.5 2.5 0 0 0-3.5 0L12 3Z"/></svg>;
    case 'eyeglasses':
      return <svg {...props} fill="none" stroke={color} strokeWidth="1.7"><circle cx="6" cy="14" r="3.5"/><circle cx="18" cy="14" r="3.5"/><path d="M9.5 13.5 12 11l2.5 2.5M3 9l1.5 3M21 9l-1.5 3"/></svg>;
    case 'crown.fill':
      return <svg {...props}><path d="M3 7l3.5 3L12 4l5.5 6L21 7v11H3V7Zm0 13h18v2H3v-2Z"/></svg>;
    case 'bag.fill':
      return <svg {...props}><path d="M6 7V6a6 6 0 1 1 12 0v1h2l-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 7h2Zm2 0h8V6a4 4 0 0 0-8 0v1Z"/></svg>;
    case 'repeat.circle.fill':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="m9 8 3-2.5v5L9 8Zm6 8-3 2.5v-5l3 2.5ZM8 12h7v2H8v-2Zm-1-4h7v2H7V8Z" fill={filled ? '#fff' : color} fillOpacity="0.85"/></svg>;
    case 'arrow.uturn.backward.circle.fill':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M14 7v2h-3a3 3 0 0 0 0 6h3v2h-3a5 5 0 0 1 0-10h3V5l3 3-3 3V7H8" fill="none" stroke={filled ? '#fff' : color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" opacity="0.9"/></svg>;
    default:
      return <svg {...props}><path d="M6 7V6a6 6 0 1 1 12 0v1h2l-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 7h2Zm2 0h8V6a4 4 0 0 0-8 0v1Z"/></svg>;
  }
}

// Container — 40×40 rounded square, Surface 2 background
function CategoryBadge({ t, symbol, size = 40, tint }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 10,
      background: t.surface2,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      <CategoryIcon symbol={symbol} size={Math.round(size * 0.6)}
        color={tint || t.text2}/>
    </div>
  );
}

Object.assign(window, { CategoryIcon, CategoryBadge });